Chrome 88 change causing blurred images during translate3d transition - google-chrome

A sliding image gallery has started performing terribly after updating Chrome to 88. See this site for example:
https://fionaandbobby.com/
You can view it in FF or Safari to see it performing how it used to perform in Chrome. After some research I distilled the behavior down a bit in a snippet below.
It appears to be totally dependent on the width of the element being transitioned. I'm sure there are other ways the slider on this site could be coded/styled, and possibly that's the solution. However, it's been working on many, many websites this way for years. Wondering if anyone has ideas about how to bypass this behavior. I've tried using the image-rendering CSS property on the img's themselves to no avail.
var button = document.getElementsByTagName('button')[0];
var ul = document.getElementsByTagName('ul')[0];
button.addEventListener('click', function() {
ul.classList.toggle('move');
});
var select = document.getElementsByTagName('select')[0];
select.addEventListener('change', function(e) {
ul.setAttribute('style', `width: ${e.target.value}px`);
});
div {
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
list-style: none;
transition: transform 0.68s ease;
transform: translate3d(0, 0, 0);
}
ul.move {
transform: translate3d(100px, 0, 0);
}
li {
list-style: none;
margin: 0;
padding: 0;
}
img {
height: 300px;
width: 533px;
}
footer {
margin-top: 40px;
}
Select different widths of the containing ul element in the dropdown below and then click the translate button to see the effect.
<div>
<ul>
<li style="width: 500px">
<img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3289&q=80" />
</li>
</ul>
</div>
<footer>
<label>
Width of wrapping element being translated
<select>
<option value="1000">1000px</option>
<option value="100000">100000px</option>
<option value="10000000">10000000px</option>
</select>
</label>
<button>translate</button>
</footer>

This was a regression in Chrome 88, that is fixed in Chrome 89 (in beta at the time of writing this).

Related

Weekday boxes have little lines or spaces between them if you look carefully. These lines or gaps are present in chrome but not in firefox

I am using vite react typescript.
My App component
function App() {
return (
<div>
<DatePicker />
</div>
);
}
My DatePicker component
function DatePicker() {
return (
<div className="datepicker-wrapper">
<input />
<input />
<Calendar />
</div>
);
}
My Calendar Component
function Calendar() {
return (
<div className="datepicker-popper">
<div className="datepicker-weekday">Sunday</div>
<div className="datepicker-weekday">Monday</div>
<div className="datepicker-weekday">Tuesday</div>
<div className="datepicker-weekday">Wednesday</div>
<div className="datepicker-weekday">Thursday</div>
<div className="datepicker-weekday">Friday</div>
<div className="datepicker-weekday">Saturday</div>
</div>
);
}
and finally my css file
body {
margin: 0;
}
.datepicker-wrapper {
position: relative;
font-family: monospace;
display: flex;
gap: 2rem;
}
.datepicker-popper {
position: absolute;
bottom: -0.8rem;
left: 50%;
translate: -50% 100%;
box-sizing: border-box;
padding: 0.3rem;
width: 100%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 0.6rem;
}
.datepicker-weekday {
display: block;
background-color: palevioletred;
}
check this image
The boxes containing weekdays have weird space or line b/w them in chrome but not in firefox.
I tried making the container flexbox, grid. I also tried changing the div to span but none of them worked.
Here is the codesandbox link : https://codesandbox.io/p/sandbox/wonderful-stitch-deoc00?file=%2Fsrc%2Findex.css&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A31%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A1%7D%5D
Try running this sandbox in chrome and firefox. You will see the difference.
I think you need just use 'normalize.css' file to avoid different results in different browsers. Normalizing file you can take from each site you have googled
EDIT: The problem from my perspective is the translate property.
There is a similar question with a probable explanation of why this happens.
If you add flex-wrap: wrap to .datepicker-wrapper, it will allow the .datepicker-popper to fall below the inputs and you can get rid of all the absolute positioning and translating that cause the white line to appear.
It will also make your code more readable.
here is the code with the above mentioned fixes applied: https://codepen.io/Aga-K-O/pen/RwBqZWq?editors=1100

Safari rendering different border width bug

Ok, so here is the problem: I wanted to create a select+button element and everything went good, apart from one thing.
For some reason a border for "select" and a border for "a" tags are rendering in a different way. And though its a tiny detail, that you may not notice if you do not zoom, it irritates me a lot.
There is no such a problem at Chrome and Firefox, but it is visible in Safari. My guess is that I might have forgotten to override some rooted "select" styles for Safari but my experiments didn't succeed.
Would be glad for your help!
Fiddle
Example Photo
HTML:
<li class="category-product-buttons">
<select style="color: rgb(38, 38, 38);">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<a class="button-anim" type="button" href="">Buy</a>
</li>
CSS is at the Fiddle
the best bet at creating a dropdown that looks the same on all browsers is in fact not to use a . if you can change the html and add js to your project it can be achieved with a ul or divs
$(document).ready(function(){
$('.custom-select__field').on('click', function(){
$('.custom-select__list').toggle();
});
$('.custom-select__list li').on('click', function(){
$('.select-value').val($(this).data('value'));
$('.custom-select__list').toggle();
});
});
/* reseting ul styles */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* styling dropdown */
.custom-select {
width: 200px;
height: 40px;
line-height: 40px;
border: 2px solid red;
}
.custom-select__field {
padding: 0 10px;
background: rgba(255, 0, 0, .2);
cursor: pointer;
}
.custom-select__list {
display:none;
}
.custom-select__list li {
padding: 0 10px;
background:rgba(125,125,0,.2);
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Only showing this field as text for demonstration, you can hide it with type="hidden"<br>
<br>
<input class="select-value" name="select-value" type="text">
<br>
You can change the style and everything as you need it.<br><br>
<div class="custom-select">
<div class="custom-select__field">Select one</div>
<ul class="custom-select__list">
<li data-value="1">1</li>
<li data-value="2">2</li>
<li data-value="3">3</li>
<li data-value="4">4</li>
</ul>
</div>
if you have questions to the concept of this, ask away

How to prevent hover effect from disabling when going on dropdown in IE?

I made a simple website that reproduces the bug in IE11.
When I hover on the red tab, it shows the blue container. In the blue container, there is a dropdown. If I then click the dropdown and hover on the items, the blue container disappears but the dropdown menu still shows. I tried in chrome, and this bug does not happen there, just IE it seems. I want the blue container to still show while I even go on the dropdown and hover on those things.
Does anyone know how to fix this?
Thanks
html,
body {
margin: 0;
padding: 0;
}
.tab {
background-color: red;
display: inline-block;
}
.hovermenu {
display: none;
width: 100%;
height: 50vh;
background-color: cyan;
position: -ms-page;
position: fixed;
}
.container {
display: inline-block;
}
.container:hover .hovermenu {
display: block;
}
<div class="container">
<div class="tab">TAB</div>
<div class="hovermenu">
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
</div>
</div>
I found out how to fix it a quick and dirty way for IE.
$("select").bind('focus', {}, function (event) {
$(this).closest(".hovermenu").css('display', 'block');
}).bind('blur', {}, function (event) {
$(this).closest(".hovermenu").css('display', '');
});

stacking divs while pushing content down upon expanding an image?

I'm working on this banner ad that I posted here yesterday and I got my images fading properly, but I had everything positioned in an absolute manner, and I need to have it so that when my ad expands, it pushes whatever content below it down. Right now, when I press expand, it covers the image below it, rather than push it down even though the picture's positioning is relative.
Here's a link to my project on codepen.
And here's my CSS:
#banner{
position: relative;
min-height: 100px;
}
.hide {
transition: opacity .5s ease-in-out;
opacity: 0;
position:absolute;
}
.show {
transition: opacity .5s ease-in-out;
opacity: 1;
position: absolute;
z-index: 1;
}
#toggle, #toggle2{
cursor: pointer;
}
#toggle{
margin-left:-123px;
}
#toggle2{
position: relative;
}
#twitterIcon{
position: relative;
}
.videoDiv > video {
display:inline-block;
border: 1px solid;
font-size:0;
margin: 0;
padding:0;
}
.videoDiv{
font-size:0;
margin-left:413px;
padding-top:152px;
}
I've read that absolute positioning makes it this way, but I need the collapsed and expanded version to be absolute so that they're on top of one another. Is there anyway I can make it so that the Coach ad pushes the image of Ron Swanson down rather than covering it?
Here is a complete solution: http://codepen.io/anon/pen/mewMEO
The solution is to make the smaller banner absolute with a negative z-index so it is in fact behind the normally positioned large banner.
Also, I took the liberty of improving your JS code by making it more generic and adding support for multiple banners on the page.
HTML
<div class="banner collapsed">
<img class="preview-size" src="http://i.imgur.com/y6foj3Z.jpg"/>
<img class="full-size" src="http://i.imgur.com/CeUfSAX.jpg"/>
<div class="btn-expand">
<img id="toggle" src="http://i.imgur.com/axmdldH.png" />
</div>
<div class="btn-collapse">
<img src="http://i.imgur.com/5wZwdGz.png" />
<a href="https://twitter.com/intent/tweet?text=I%20LOVE%20the%20new%20%40coach%20swagger!">
<img id="twitterIcon" src="http://i.imgur.com/WxSsDpb.png" />
</a>
</div>
</div>
<div class="push">
<img src="http://i.imgur.com/sFNERNs.jpg" />
</div>
CSS
.banner {
position: relative;
width: 970px;
}
.banner img {
/* Get rid of that margin on the bottom of the images */
display: block;
}
.banner .btn-collapse img {
display: inline;
}
.banner .btn-expand {
position: absolute;
bottom: 0;
right: 0;
}
.banner .preview-size {
z-index: -1;
position: absolute;
}
.banner .btn-expand {
display: none;
}
.banner.collapsed .preview-size {
z-index: 0;
position: relative;
}
.banner.collapsed .preview-size,
.banner.collapsed .btn-expand {
display: block;
}
.banner.collapsed .full-size,
.banner.collapsed .btn-collapse {
display: none;
}
JS
(function() {
var bannerEls = document.getElementsByClassName('banner');
// Support multiple banners
for (var index = 0; index < bannerEls.length; index++) {
var currBannerEl = bannerEls[index];
var expandEl = currBannerEl.getElementsByClassName('btn-expand')[0];
var collapseEl = currBannerEl.getElementsByClassName('btn-collapse')[0];
registerBannerToggle(expandEl, currBannerEl);
registerBannerToggle(collapseEl, currBannerEl);
}
function registerBannerToggle(clickableEl, bannerEl) {
clickableEl.addEventListener('click', function(e) {
toggleCollapseState(bannerEl);
});
}
function toggleCollapseState(bannerEl) {
if (bannerEl.className.indexOf('collapsed') !== -1) {
bannerEl.className =
bannerEl.className.replace(/collapsed/g, '');
}
else {
bannerEl.className += ' collapsed';
}
}
})();
The reason you are not able to do this was intentional to deter advertisers from messing with the actual website content. To pull it off, you would have to keep the position relative for the add or manipulate the ".push" div using javascript.
I dont know much plain javascript so I changed it for jQuery if you don't mind
All I've done was get images height and set animate on them with click on #toggle/#toggle2
CODEPEN

HTML Select Drop Down Option Z-index

I have a simple select drop down when I am going to select an option there is Menu navigation item, so now when I am going to hover on menu items navigation is going back to select option list which is open. It's happening in all browsers. I don't know whether it's a bug or what. Steps are:
Open select dropdown options
Same time hover on navigation menu items
Now the navigation items are going behind the option list (not behind the select tag)
I have tried giving z-index with positions. But nothing is working. I think its not an issue but need explanation on same. Any suggestions will be greatly appreciated.
This is the sample code:
<style type="text/css">
/* #################### Navigation bar CSS styling ################## */
.mynavbar {
position: relative;
width: 100%;
height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
margin: 0; border: 0; padding: 0;
background-color: #666633;
}
a.navbartitle {
display: block;
float: left;
color: white;
background-color: #666633;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0; border: 0; padding: 0;
line-height: 23px; /* corresponds to 'top' value of .submenu below */
text-align: center;
text-decoration:none;
}
a.navbartitle:hover {
background-color: #447755;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 180px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
Using these fixed values isn't as elegant as just letting the text of each
menu title determine the width of the menu titles and position of the submenus,
but we found this hardwired approach resulted in fewer cross-browser/cross-OS
formatting glitches -- and it's pretty easy to adjust these title widths and the
corresponding submenu 'left' positions below, just by eyeballing them whenever
we need to change the navbar menu titles (which isn't often). */
.submenu {
position:absolute;
z-index: 2;
top: 23px; /* corresponds to line-height of a.navbartitle above */
padding: 0; margin: 0;
width:166px; /* If adjust this, then adjust width of .submenu below a too */
color: white;
background-color: #666633;
border: 1px solid #447755; /* box around entire sub-menu */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */
/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
If you adjust menu title text, you might want to adjust these too. */
#products_submenu { left: 0px; visibility: hidden; }
#services_submenu { left: 104px; visibility: hidden; }
#funstuff_submenu { left: 204px; visibility: hidden; }
#aboutus_submenu { left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
the mouse goes over the menu title. Using the 'visibility' property instead
of using the 'display' property avoided a bug in some versions of Safari.
(The bug is pretty where esoteric: The browser ignored the 'hover' property
on 'li' objects inside an object whose display property was set to 'none'
when the page loaded...) Using the 'visibility' property instead of 'display'
would normaly take up extra room on the page, but that's avoided here by putting
the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
in .submenu definition, higher up this page. */
.submenu a
{
display: block;
color: #eee;
background-color: #666633;
width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
padding: 5px 0px 4px 20px;
text-decoration: none;
background-color: #666633;
border-bottom: #447755 dotted 1px;
border-top: 0; border-left: 0; border-right: 0;
}
ul { position: relative; display: block; }
li { position: relative; display: block; }
.submenubox {
margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
margin: 0; padding: 0; border: 0;
list-style-type: none;
}
.submenubox ul li {
margin: 0; padding: 0; border: 0;
}
.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
color: #c6e8e2; /* text color for submenu items */
background-color: #447755;
border-bottom: #447755 dotted 1px;
}
</style>
<script type="text/javascript">
// JavaScript functions to show and hide drop-down menus.
// In SimpleNavBar.html we call ShowMenuDiv each time the mouse goes over
// either the menu title or the submenu itself, and call HideMenuDiv when the
// mouse goes out of the menu title or the submenu iteslf (onMouseOut).
function ShowItem (itemID) {
var x = document.getElementById(itemID);
if (x)
x.style.visibility = "visible";
return true;
}
function HideItem (itemID) {
var x = document.getElementById(itemID);
if (x)
x.style.visibility = "hidden";
return true;
}
// As noted in the SimpleNavBarStyles.css file, using x.style.visibility as
// seen below seemed to have better cross browser support than using
// x.style.display="block" and x.style.display="none" to show and hide
// the menu.
</script>
<div class="mynavbar">
<a onmouseover="ShowItem('products_submenu');" onmouseout="HideItem('products_submenu');" href="placeholder.html" id="t1" class="navbartitle">Products</a><a onmouseover="ShowItem('services_submenu');" onmouseout="HideItem('services_submenu');" href="placeholder.html" id="t2" class="navbartitle">Services</a><a onmouseover="ShowItem('funstuff_submenu');" onmouseout="HideItem('funstuff_submenu');" href="placeholder.html" id="t3" class="navbartitle">Fun Stuff</a><a onmouseover="ShowItem('aboutus_submenu');" onmouseout="HideItem('aboutus_submenu');" href="placeholder.html" id="t4" class="navbartitle">About Us</a><a onmouseover="ShowItem('contact_submenu', 't5');" onmouseout="HideItem('contact_submenu');" href="placeholder.html" id="t5" class="navbartitle">Contacts & Directions</a>
<!-- REPLACE each "placeholder.html" URL below with the specific page you want
the user to go to when the given submenu item is clicked. -->
<!-- Products sub-menu, shown as needed -->
<div onmouseout="HideItem('products_submenu');" onmouseover="ShowItem('products_submenu');" id="products_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Flying Cars</a></li>
<li><a class="submenlink" href="placeholder.html">Super Squirters</a></li>
<li><a class="submenlink" href="placeholder.html">Sling Shots</a></li>
<li><a class="submenlink" href="placeholder.html">Bamboozlers</a></li>
<li><a class="submenlink" href="placeholder.html">Kazoos</a></li>
</ul>
</div>
</div>
<!-- Services sub-menu, shown as needed -->
<div onmouseout="HideItem('services_submenu');" onmouseover="ShowItem('services_submenu');" id="services_submenu" class="submenu">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Toy Design</a></li>
<li><a class="submenlink" href="placeholder.html">Market Research</a></li>
<li><a class="submenlink" href="placeholder.html">IP Consulting</a></li>
<li><a class="submenlink" href="placeholder.html">Licensing</a></li>
</ul></div>
</div>
<!-- Fun Stuff sub-menu, shown as needed -->
<div onmouseout="HideItem('funstuff_submenu');" onmouseover="ShowItem('funstuff_submenu');" id="funstuff_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Toys We Designed</a></li>
<li><a class="submenlink" href="placeholder.html">Press Ravings</a></li>
<li><a class="submenlink" href="placeholder.html">Our Blog</a></li>
</ul>
</div>
</div>
<!-- About Us sub-menu, shown as needed -->
<div onmouseout="HideItem('aboutus_submenu');" onmouseover="ShowItem('aboutus_submenu');" id="aboutus_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Team</a></li>
<li><a class="submenlink" href="placeholder.html">Investors</a></li>
<li><a class="submenlink" href="placeholder.html">Partners</a></li>
<li><a class="submenlink" href="placeholder.html">Careers</a></li>
<li><a class="submenlink" href="placeholder.html">Our Blog</a></li>
</ul>
</div>
</div>
<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed -->
<div onmouseout="HideItem('contact_submenu');" onmouseover="ShowItem('contact_submenu');" id="contact_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Contact</a></li>
<li><a class="submenlink" href="placeholder.html">Getting Here</a></li>
</ul>
</div>
</div><!-- end of sub-meus -->
</div>
<div><select style="margin-left: 200px; position: relative; z-index: 0;">
<option value=""></option>
<option value="28">Test</option>
<option value="Eff2">Test</option>
<option value="Effort1">Test</option>
<option value="FC">Test</option>
<option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option>
</select>
</div>
The <select> element is an interactive content element in HTML5 and a menu in HTML4.01. As such it is an object which requires user input and behaves like a right click context menu and is rendered above all document elements if active. Try it for yourself - open your contextmenu and hover over the navigation.
This bug is connected to the behavior of other interactive content elements such as video (see also HTML5 rendering).
The only way to prevent such behavior is to change the display property of an active select to none while hovering an interactive element. visibility:hidden; won't help since the options are still shown, and using display:none; on options will results in rendering errors.
Here is a small demonstration of the technique described above:
.mynavbar:hover ~ * .selecthack > select:focus
.mynavbar:hover ~ .selecthack > select:focus{
display:none;
}
its very simple
$('IdOfMenu').on('mouseenter', function() {
$("IdOfDropDown").blur();
});
Set your z-index to -1 for it to appear on the bottom. So on your select element you have an inline style defining the z-index to 1. Change it to negative 1.
<select style="margin-left: 200px; position: relative; z-index: -1;">
I tried this in IE8 and it worked. The select drop-down was behind the menu options.
for those who have the same problem it is very easy, add the code below under your code's Menu, this worked for all the navigators.
<input id="HideMenusTxt" name="HideMenusTxt" type="text" value="0" style="width:0;height:0;position:absolute;z-index:-1"/>
<script type="text/javascript">
//menuId= The Id of the div menu
$('#menuId').on('mouseenter', function() {
//in case we have opened select dropdown options, on mouseenter of the menu we set focus to "HideMenusTxt".
$('#HideMenusTxt').focus();
});
Other solution, check if there is a select in the form and focus to the first element in the form instead of creating a hidden field.
$('#menuId').mouseover(function () {
//in case we have opened select dropdown options, on mouseover of the menu we set focus to the first element in the form.
var firstSelectElement = $('form:first select:first');
if (firstSelectElement.length > 0) {
$('form:first *:input[type!=hidden]:first').focus();
}
});
Using display: none causes the dropdown to lose it's focus, if it has - at least in Chrome, not so in Firefox. This can cause trouble, if some content shall be displayed instead of the <select> when the dropdown is used (replace options by some custom HTML).
Using position: relative; z-index: -1 may also cause trouble: As it makes the <select> disappear behind the default layer, it may become impossible to click the dropdown. Further, the "focus" event may be fired after the options have been rendered, so changing the z-index via JavaScript may not work as intended.
I came up with the solution to shift the dropdown out of view on "focus" and shift it back on "blur":
position: relative; left: -9999px;
Compared to display: none, this solution also keeps the layout intact (except that the dropdown disappears), as the dropdown may define the height of its parent block element.
As Zeta said, the select box is an interactive element, you can't display anything above it using HTML/CSS, so the only option is to hide it when showing your menu, or simply to blur any focused selects on the page.
If you don't want to add any additional css classes though, you could simply blur() either at the start of your ShowItem function:
...
function ShowItem (itemID) {
//jQuery version
$('select:focus').blur();
//OR non-jQuery:
document.activeElement.blur();
//note this will blur any focused element, so you might want to check
//if document.activeElement.tagName == 'SELECT' first, or other conditions
var x = document.getElementById(itemID);
...
...or more generically (for other readers not in your specific situation) in a hover or mouseenter event callback on the menu items that trigger the submenus appearance.