Chrome artifacts on the retina screen
I am developing a large single page application and in the process I execute a number of rendering artifacts, each of which is specific to chrome. My chrome version is the most recent version of this post: Version 39.0.2171.95 (64 bit). Both of them only happen on my macina pro retina monitor, if I move the window partially or completely to another monitor, the part on that monitor no longer shows the artifact (after chrome plating) the first world problem I know ...
My gut tells me that if I pick up a specific CSS property, or move on to something a little different, I can avoid these problems, but everything I've tried has failed. So I look at you wise members of the stack community, gather and listen to my stories:
Artifact One: The simple show hides itself unsuccessfully in a seemingly random but highly reproducible way.
Check out these three images, one is not like the other!
Each little icon at the top hides or shows another div. They are all equivalent, just show a different number of these traffic related icons. The middle one will not be displayed just on the first left click (one with all machines). I think this is because one with all cars has a scrollbar. If I then go to the chrome inspector and how to check or remove at least some information about it, chrome redraws it just fine. Again this all works on a different monitor / literally any other browser (including ie8), so this is not some silly coding error.
Second artifact: When I scroll, the fixed div at the bottom of my page is clipped and moved with the page.
Note that the blue stripe is cut out! The blue bar has CSS like this:
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
It can't even be sliced right where there is some kind of delimiter in the html. There is no element on the cut line, the only adjacent element is a white box (and there is no such pad or margin from that white box .. it literally accidentally carves into space)
Any help would be greatly appreciated. It's a huge pain when all we have to showcase are retinal screens.
source to share
It's just that someone else had problems getting the items to display correctly on Chrome with Retina display: How do I remove one pixel space between those items on retina displays?
It looks like Chrome on Retina screen might have some rendering engine issues when it comes to displaying page elements. You can check if its an engine issue if this issue occurs in the latest version of Opera, as it uses the same Blink rendering engine as Chrome (a separate fork from Webkit that Safari uses).
If the problem is with the engine, you can limit your options to fix the problem until Google publishes a fix. Otherwise, there might be a mad genius here who can solve the problem.
Good luck:)
source to share
Regarding the position of the fixed bar, try editing the css for this
position: fixed;
bottom: 0px;
width:100%; /* or whatever your width is */
height:50px; /* or whatever your height is */
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
As for the display issue, if it works fine in other webkit browsers which usually indicate that the issue is with the browser itself and you can't do anything about it other than maybe create a rule for the screen size, display issue to show a website or app in a different style, or maybe zoom in or out?
Anyway, you're in luck with your problem
source to share