S
S
Sergey Zolotarev2019-01-09 18:58:30
css
Sergey Zolotarev, 2019-01-09 18:58:30

What Webkit browser hack should I use to make the home page work properly?

Good evening!
Has anyone encountered the following problem?
I'm still running into one situation where Webkit is causing a lot of problems for everyone right now.
The main page of the site has a newsfeed interface.
The feed consists of 3 blocks of 3 latest news.
The problem lies in the very work of the last block and applied the following CSS3 code for this:

.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news{
  width: 130mm; 
  height: calc(195mm+39mm); 
  background-size:cover;
  background-repeat:no-repeat;
  display:inline-table;
  color:white;
  display:inline-table;
  border-radius:39px 39px;
  background-image:url("/media/images/site/desktop/homepage/foundnewsfeed/center.png");
  color:white;
}

.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news:nth-child(1){
    float:left;
    margin-left:5mm;
}
.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news:nth-child(2){
    margin-left:10mm;
}
/*Самый проблемный дочерний контейнер.*/
.content > .matherial-cont .found-news-feed .news-slide  .news-feed-slider-cont .slide  .news:nth-child(3){
   float:right;
   margin-right: 5mm;
}

Where class .newsis the news description element itself.
Firefox, IE and other Gecko-based browsers do a good job of all elements...
Webkit doesn't do a good job of the third element.
I tried the possibilities of JQuery and Detect.js, and the same Gek friends cope with these possibilities:
function CrossBrowsing(){
  var threenews=$(".content > .matherial-cont .found-news-feed .news-slide .news-feed-slider-cont .slide .news:nth-child(3)");//К третьему новостному блоку.
    var user=detect.parse(navigator.userAgent);
    if(user.browser.family=="Firefox"){
    	 threenews.css("margin-top","-1mm");//Отступаем третий блок в Firefox на -1мм.
    }
    else if(navigator.vendor=="Google inc."){
    	threenews.css("margin-top","-238mm");//Отступаем третий блок в Opera.
    }

    if($.browser.msie){
        var twonews=$(".content > .matherial-cont .found-news-feed .news-slide .news-feed-slider-cont .slide .news:nth-child(2)");
        twonews.css("margin-left","19mm");
    }
}
$(document).ready(CrossBrowsing);

I tried to apply browser prefixes, change this JavaScript code every time, searched for materials in Yandex, and nothing happened.
As I know now Gecko based browsers are pushing their boundaries and Chronium is grabbing the boundaries of HTML and CSS lately...

What webkit hack would be applied to solve this problem?
I observe the very cross-browser compatibility, studying the materials in Caniuse ... ^-)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question