I'm creating a multi-format editable date/time widget, and I just noticed how a divider line in one widget looked fatter than the same line other widgets (fatter in the one with the red text):
Here's the CSS for that:
.tbw-dse-divider {
align-self: stretch;
background-color: #A6A6A6;
margin: 0 max(1px, 0.0836em);
overflow: hidden;
position: relative;
white-space: nowrap;
width: max(1px, 0.0836em);
}
If I tweak this CSS by moving the position of the divider half a pixel with left: 0.5px, that one divider gets thinner, and the others get fatter:
According to the web console, this line is rendered at 2.5px wide. I'm guessing this is some sort of round-off error, where sometimes I get 2 pixels, sometimes I get 3 pixels.
Neither Firefox nor Safari have this problem, and the divider's appearance is always consistent. The screenshot is from a high-res screen, so it should be easily possible to render half of a px cleanly.
Does anyone know a way to fix this Chrome width-rounding problem?
As rendered by Firefox:
I found an answer by searching the topic of "subpixel rendering". The following silly trick fixes the problem:
.tbw-dse-divider {
align-self: stretch;
background-color: #A6A6A6;
margin: 0 max(1px, 0.0836em);
overflow: hidden;
position: relative;
white-space: nowrap;
width: max(1px, 0.0836em);
transform: rotate(-0.0000000001deg);
}
The nearly-0 rotational transform tricks Chrome into doing subpixel rendering that it would otherwise not bother trying to do. Answer found here: Is there a way I can force chrome to do subpixel rendering for a slow translation?
Related
In certain situations html elements that use pixels are not always rendered as imagined, a simple example is when a person adjusts the browser zoom to about "100%", so depending on the position and zoom one element of height equal to the other seems to be a smaller pixel.
One example is the StackOverflow site menu itself, example with "175%" zoom:
Note that the third menu bar appears larger than the others and that the spacing of the first and second bars also appears larger.
This is not just about "zoom", I tested it on a colleague's notebook with Windows10 and GeForce® GTX 1050 card (of course I understand that in part modern computers render with the "integrated card") and it uses in the Windows display settings for the operating system all the value of 125%:
Using this, I realized that the same problem occurs (even with 100% zoom in the browser).
The only displays that I noticed that the problem does not occur are those of retina displays (and similar "technologies"), because they use a higher "pixel density".
But the question is NOT about monitors, displays and market technologies, the question is how to avoid the problem on normal screens when the user adjusts something (like example in Windows10 with 125% on display settings), noting that it varies with resolution and even the monitor and is "unpredictable".
I tried to work with other units of measure (em, pt, rem, %), but the problem persisted.
So here goes my question:
How to prevent pixel rendering on elements from being distorted in display settings that may vary?
An example that the problem occurs (chance adjust the source of the "OS" or the zoom):
*, ::after, ::before {
box-sizing: border-box;
}
body {
background-color: #007bff;
}
.v-navbar-toggle {
vertical-align: middle;
position: relative;
cursor: pointer;
display: inline-block;
background: none;
outline: 0;
border: none;
padding: 10px 8px;
color: #fff;
margin: 0;
}
.v-icon-bar {
background-color: currentColor;
overflow: hidden;
display: block;
width: 24px;
height: 2px;
border-radius: 1px;
}
.v-icon-bar+.v-icon-bar {
margin-top: 4px;
}
<button class="v-navbar-toggle">
<i class="v-icon-bar"></i>
<i class="v-icon-bar"></i>
<i class="v-icon-bar"></i>
</button>
Note: I also noticed that working with svg (depends on how you use it) or icon-fonts works a lot better compared html+css, but what I am trying to solve are problems with simple "html elements".
I do face a rendering problem using backdrop-filter: blur(12px); in Chrome 76 on MacOS Mojave. Whenever I start to hover with my mouse over the opened tabs in Chrome, the div using the backdrop-filter starts flickering and the div is subdivided into smaller rectangles having different colors and are split by horizontal lines with shadows.
I don't know if it's a rendering problem, a glitch, some overflow problem or just a bug in Chrome.
Here is the fiddle.
I already tried variations of:
transform: translateZ(0);
backface-visibility: hidden;
overflow: hidden;
margin: 0
will-change:top;
position: static;
Nothing seemed to work.
Minimal Example:
<html>
<head>
</head>
<body>
<div id="articleViewOverlay" class="articleViewOverlay">
</div>
</body>
</html>
.articleViewOverlay {
position: fixed;
width: 200px;
height: 200px;
border-style: dashed;
backdrop-filter: blur(12px);
background-color: rgba(125, 125, 125, 0.4);
margin: 0;
overflow: hidden;
}
From your description, my guess is that you're encountering this bug. If so, feel free to star that bug (top-left corner) to get updates. There aren't any workarounds at this point, but it's work in progress.
I had the same problem, adding this to the element being blurred fixes it:
-webkit-transform:translate3d(0,0,0);
because if forces gpu rendering
The bug was fixed in Chrome build 79.0.3945.1 (Oct 16th, 2019)
I have a container which has position:fixed with scrolling content inside. I'm displaying this as a chat feature on mobile devices but on mobile Safari, the scrolling content inside the position:fixed container stops scrolling suddenly and starts to scroll the container itself.
Open this link on mobile Safari to see the effect: http://jsbin.com/ruyito
Editable example here: http://jsbin.com/ruyito/edit?html,css,output
The question: Why does my container div start to scroll its position suddenly and stop scrolling the content? (On Chrome on Android, it works without issue)
Note: if you're having trouble triggering this bug, keep scrolling the content up and down quickly for 10 seconds or so, eventually it will suddenly stop scrolling.
I've come across this issue several times when trying to use use overflow: scroll div's in iOS Safari.
My understanding it that it's to do with the overscrolling/elastic scrolling animations. What seems to happen is:
When a certain container (i.e. the window, or your scrolling div) is running these animations the events get locked to that container.
When an overflow: scroll container hits the top/bottom of it's scroll height it then starts scrolling the parent container - this is also the case in Chrome.
You may notice in your example that when the scrolling stops working, not touching the screen for a small amount of time (say 500ms?) then trying to scroll again works.
What I think is happening is that when you hit the bottom/top of your scrolling container, the events are getting locked to the parent, in this case the window. While you keep interacting in this state, your events never make it to your scrolling container, and so it appears to be unresponsive.
I've had some success in the past by not propagating the touch events from my scrolling container up to the document:
$('.chat-container-mobile').on({
'touchstart': _onTouchStart,
'touchmove': _onTouchMove,
'touchend': _onTouchEnd
});
function _onTouchStart(e) {
e.stopPropagation();
}
function _onTouchMove(e) {
e.stopPropagation();
}
function _onTouchEnd(e) {
e.stopPropagation();
}
Note: This will not be a fix in many situations, as you often need to retain default window behaviour. In this case though, you seem to have a fixed layout which doesn't require default document scrolling behaviour. Additionally, you will likely still see the same result if you attempt to scroll by touching on the top 'Group chat' bar or bottom 'Type message' bar, then quickly afterwards try to scroll within your container.
You could also try using e.preventDefault on $(document) for these touch events. This prevents the window from reacting to these user inputs in the first place, again though this can cause many other problems if you need to retain browser defaults.
Also try to localise these bindings only in situations where it's a problem. So check for iOS and Safari before binding onto the events.
I'll come back with any extra findings the next time I try to deal with the the problem - which, let's be honest, is almost every project.
Good luck!
Just try to add bottom:0 to .chat-container-mobile { bottom:0 }
I dont quite know what the deal is here. It might be that safari freezes when moving it that quickly because it still technically moves the container the way it should by the inspector tools definition, just does not portray it on the screen.
One thing you could try that I did in the inspector tools and seems to solve the issue is reverse engineering what you have. Try this changeup to your code. note the positioning/height/padding on your .chat-container-mobile and z-index/bottom/positioning on the other two elements.
<style>
.chat-container-mobile {
position: fixed;
background-color: #EBEBEB;
padding: 15px;
display: block;
margin: 0;
top: 0px;
color: #444444;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 50px);
padding: 75px 15px 125px;
}
.chat-mobile-header {
position: fixed;
z-index: 10;
width: 100%;
background-color: white;
color: #444444;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 15px;
font-weight: 500;
text-align: center;
top: 0;
margin: 0;
padding: 17px 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.2);
}
.chat-field-mobile {
position: fixed;
width: 100%;
z-index: 10;
bottom: 0;
margin: 0px;
padding: 12px 12px 10px 10px;
background-color: #EBEBEB;
border-top: 1px solid rgba(68, 68, 68, 0.1);
}
</style>
doing it this way those other elements just lie on top of your chat window instead of trying to stack or force your pieces together.
Hope this helps mate!
I opened the link ( http://jsbin.com/ruyito) iPhone 6 - Safari and everything looks fine. Content scrolls as expected. I tried many times up and down scroll but nothing happened.
At which version this happens? I couldn't say anything without experience the bug but i think it can be virtual scroll issue.
You can disable this by adding this.
.chat-container-mobile {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
I have just encountered the strangest bug I have ever seen.
You can see a demonstration here: Fiddle
I have an iframe from google maps, wrapped in a div that has the following styles:
.container {
width: 600px;
background: red;
/* Problematic propeties */
box-shadow: 0px 40px 20px 0 blue;
perspective: 10px;
overflow: hidden;
/* ---- */
}
The only style the iframe has, other than default is display: block.
The issue is, that the iframe gets moved, depending on the value of box-shadow of its parent div. From my experiments i found out that it gets moved to the right by the: box-shadow blur - box-shadow x-position. Its a little hard to explain so i encourage you to take a look at my fiddle.
If i remove any of the css propeties that are in the "problematic propeties" comment, the issue goes away. My question is: Is there any way to fix this issue, without removing any of those propeties?
The issue is only visible in Chrome - Firefox and IE are fine.
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>