Initially I was only able to reproduce on Mac Retina displays with Chrome version 65.0.3325.181.
However, I have been able to duplicate it in Windows and Linux on the same version of Chrome by selecting "Laptop with HiDPI screen" in the device list in Chrome developer tools.
If you turn on the HiDPI screen device option and run the codepen below you will notice that the button writes to the console initially. But after scrolling down and focusing on the non sticky content the button will no longer be interactive. It appears that if you click a lot and move the mouse around it will eventually work again.
If you take away the height and overflow on the outer container it does work, however this functionality I would like to preserve.
Can anyone think of another workaround?
https://codepen.io/acarl/pen/MVdzZj
HTML
<div class="container">
<div class="sticky">
<button onclick="console.log('clicked')">
write "clicked" to console
</button>
</div>
<div class="content">
</div>
</div>
CSS
.container{
height: 300px;
overflow-y: auto;
}
.sticky {
background-color: #ccc;
padding: 2rem;
position: sticky;
top: 0;
}
.content {
height: 800px;
background: linear-gradient(red, yellow);
}
I did notice this Chrome bug report, but it appears pretty old and this may be a more special case of the bug orginaly fixed.
https://bugs.chromium.org/p/chromium/issues/detail?id=673538
This has been fixed in Chrome 66.
Related
Setup & Goal
I am trying to apply a texture to all the content on my page. The aim is to make the site look like a piece of printed paper.
In order to achieve that, I am using an absolutely positioned div with the same dimensions as my content. It has an image as background and user-interaction is disabled. I use the mix-blend-mode: multiply to apply the texture to everything behind.
The set up looks something like this; however I was unable to reproduce the issue in the snippet editor:
.main-content {
position:relative;
width: 500px;
height: 500px;
background-color:lightblue;
border: solid 10px red;
}
.texture {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: -10px;
mix-blend-mode: multiply;
user-select: none;
pointer-events: none;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAZoAMABAAAAAEAAAAZAAAAANoMEmUAAALiaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjU8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjI1PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Ch9KojkAAAN+SURBVEgNTdVpctswDAVgipGX2E6cNLn/ofqnPUXGS7wvKj626JgzNEXg4eEBpOTu18/fQ9d15fv7u1ifnp7KZDJpczwel+PxWC6XS+n7vtRayzAMZRtYvtVmXebzedntdg2zWCwa5nw+F+Pj46PF19vtVvb7feGQYDQaNSLPyK1fX19ls9mU6XTacBJJfr1eW/KXl5cigVhCcBr3+72cTqfSU/E4gKhUFTLDKgApMfaESWSqJquW4Pn5uSXjg++RIM42IZcdqRZ5RkIlQRJJDZdkh8PhfzvFGMglxF0ZBZgSIRf0qDTBKjARwOfZeU4MPm1mw9XsTVkE2iAHoBqRRCpZrVatLbPZ7G/bAuMMLqdzOe4PpYvSrudLOez2pZauLGbzMtzuzQdTJTGQy6w1EugxW6rKnsNowT1EaZ+WfX5+NpHi8KkC3lRZZdAm6pVv5XSlDYrf398biT2/6VB/hH0Cu92WG/LwX0OYdRTk0+DbBU8vgBoKXVGZJdM6NiJyr4LcexZnL6FBrErstXYbydvBZxLqnQsAcqDWlng2kOVlgH17e2v4fAUIZHcxnCEu3K+vr6WXHQGjnhoteygVpIoMkMSzGKvzYkuhbNRLzO4llbQCZACDhGzaJomqBPHZs7tx6/W6CbA3+PDAijHh8PVU59XVIioNK5DqMkhLEGVF8HkuYvIcVS+5tnluV1h2ZBySakNWR8lyuWz2x7bC+1B2gZ/Ftb/EgZ/CNg7STEyoM65+BMuoTalcIsoFaJVnSvmNUbQHSd4iHK47nmtU2zDBpwvVBomNICQC7A2rtpmeW7WBU+l4GpdiiE9HzHjjyj2+akO8JHg2cQGIxl0ZTMoRZUIHSZkvQPr5KDUlMXVCrOSqtsJJwGdUBiRWRk7/HarJM+JDaDWyWqszhG2V/WthcqbolgRQzyXwLFhrKExCvkzKrsI8Bz5X2tsuXqWEZrU1774knIa3WRKKEDhcayqElQRh4ogx8MGyZ6L2MgJTmV9kJFkJm3bCPCpNbH5IxajMdAvhVSxpRWZyphoKOO19JpStSuodLh9MElEuCbxzkNi75+vt8rRKgCRBAogEiFq+rFTb0g5LsQ6wmRLAaivh/HgrRdRR6nZxegagDolKBOdgg2FDLkZrrLDOlN/np7U4b0C2ipMj9wJzOhtfVpXC5PuTAqhGDM+X5/wHWO18ZrEZ4QIAAAAASUVORK5CYII=')
}
<div class="main-content">
Lorem Ipsum
<div class="texture"></div>
</div>
Issues
This works fine on initial load in all browsers where mix-blend-mode is enabled. https://caniuse.com/mdn-css_properties_mix-blend-mode
Issues arise however in:
Safari (OSX)
Safari (iOS)
Whenever the zoom functionality of the browser is used, either through pinch or automatically through activation of an input field, the Browser seems to "forget" that the mix-blend-mode property is set on the element and shows it fully opaque in front of all content.
Zooming back out does not solve the issue.
Disabling and re-enabling the mix-blend-mode property manually through the developer tools does solve the issue.
Is this a known bug in Safari? Are there any known workarounds for this issue?
the next positions of elements
* {
box-sizing: border-box;
}
.container {
width: 100%;
font-size: 0;
}
.container>div {
display: inline-block;
width: 50%;
height: 100px;
font-size: 1rem;
bacground-color: #654fca;
}
<div class='container'>
<div class='item-left'>
<div class='item-right'>
</div>
all browsers position the element-left and the element-right horizontally, one after another. Only a nice browser Safari for Windows puts upright, pressing them to the left. Who can explain, or tell where to read about calculating the widths in the Safari browser, because if you reduce the width of the elements as 49%, the elements become horizontal, but with the edge remaining space.
Update your css this way and you won't need to worry about browser compatibility:
Add to your css: ( keep your original styles)
.container>div.item-left {
float:left;
}
.container>div.item-right {
float:right;
}
If you work with safari and want to find out the width, you first have to enable the developer toolbar in the browser.
You have to open the safari preferences and click on the advanced tab. Then select "Show Develop menu" in the menu bar box at the bottom of the pane. Now you can close this bar. Now right click anywhere inside of the content area and select "Inspect Element".
Now a new window should appear in the bottom of the browser. When you hover a part of the window, the code will appear. The first number is the width. Hope i could help you.
I have two DIVs, main and header. Both are position: fixed. The top of the header places it above (in the negative top margin of) the main DIV, which has overflow: auto to allow for scrolling. The header is visible on all modern desktop browsers I've tested, except Chrome and Safari on Mac, where it's clipped (hidden).
This seems like a bug, but I don't understand why it would only affect Webkit-based browsers on OS X.
Here's the code...
HTML:
<div id="main">
<div id="header">Partially clipped in Chrome and Safari on Mac.</div>
Main content goes here.<br/>
Main content goes here.<br/>
...
</div>
CSS:
#main {
position: fixed;
top: 50px;
height: 100px;
overflow: auto;
}
#header {
position: fixed;
top: 42px;
}
Live example here.
I found a few similar reports and suggestions about using -webkit-transform: translateZ(0). Interestingly, that doesn't fix it, but it does make the bug occur on Windows. Example here.
Any ideas?
I have this problem:
As you can see that my popup is not hiding the two buttons which are displayed on the page on IE9 but works fine on Mozilla. I have this on my CSS styles on that toggle button:
.Test.toggle-button {
background-image: url("../../../images/expand16.gif");
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 30px;
margin-left: 10px;
padding-left: 18px;
white-space: nowrap;
width: 20%;
}
This is how my HTML looks like:
<div class="pay-instruction-labels">
<div class="pay-instruction-title">
Payment Instructions:
</div>
<span class="current-details toggle-button">Current</span>
<span class="prior-years-details toggle-button">Prior Years</span>
<div class="pay-instruction-fields">
What is going wrong here?
Could be a z-index issue. Can you try giving your popup container element position:relative and a z-index:9999 ?
This might be a native rendering issue: IE9 uses Windows buttons; these are rendered by Windows outside of the normal HTML renderer.
Try to replace the buttons with something that just looks like a button (for example a link that is styled with an image).
It was a position: relative fault. Fixed it, it worked. Thanks everyone :)
Dear all, is there a way to scroll, as in relatively shift the contents of, an element without using javascript, and only using CSS?
If that matters, the element in question has overflow:hidden and white-space: nowrap to make it 'hide' some parts of its content. The element is normally scrollable with javascript, but needs to be properly shifted upon initial rendering (and without further interactive scrolling, of course) in case javascript is disabled.
No, there is no way to scroll items on a page (unless it's an iframe with the hash portion of the url included, in which case the browser will control the initial positioning of the scroll, not css or html) using only CSS and HTML.
No. Not with CSS directly.
You could simulate it, by wrapping the contents with a div and giving it a margin-top value for the amount of scrolling you want.
(remember to remove it/set it to 0 with javascript when it is enabled)
update
A cool idea is what Jamie, mentions in his answer, if it fits your requirements.
update 2
Here is another solution i created out of Jamie's idea, that needs no frames.
Put an anchor <a name="anchor_name">..</a> at the place you want the scrolling to be and use a
<meta http-equiv="refresh" content="2;url=#anchor_name_here">
to auto-scroll there. (the meta element should go in the head though for (x)html conformance)
example at http://www.jsfiddle.net/gaby/f3CVY/5/
works great in all browsers i tested it (IE, Chrome, FF, Opera, Safari)
There is also another method - which is quite hacky - but it works without a reload.
The solution I've created works in the following browsers:
Firefox 4+
Safari 5+
Chrome 6+
Opera 11+
IE 10+
Android 2.3+
It's really a bit hacky, so see whether you would use it or not. :)
A little explanation
I used the HTML5 attribute autofocs on an <input>-field. As this will focus the input, it has to get it into the viewport. Therefor it will scroll to the given position. To get rid of the highlighted outline and to not see the input at all, you have to set some styles. But this still forced Safari to have one blinking pixel, so I did the trick with the span, that acts like an overlay. Note that you can't simply use display: none as this won't trigger the autofocus (only tested this in Safari).
Demo
Try before buy
The demo will run in Safari and Chrome only. IE and Firefox seem to not fire autofocus in an <iframe>.
CSS
div.outer {
height: 100px;
width: 100px;
overflow: auto;
}
div.inner {
position: relative;
height: 500px;
width: 500px;
}
div.inner > input {
width: 1px;
height:1px;
position: absolute;
z-index: 0;
top: 300px;
left: 200px;
border:0;
outline:0;
}
div.inner > span {
width: 1px;
height:1px;
position: absolute;
z-index: 1;
top: 300px;
left: 200px;
background: white;
}
HTML
<div class="outer">
<div class="inner">
<input type="text" autofocus></input>
<span></span>
</div>
</div>