When I "fullscreen" an element (let's say a div), I can't get anything other elements to appear (while in fullscreen mode). Why is that happening? How can I accomplish this?
Related: Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>?
It seems that browsers (Chrome 28, Firefox 23) set the z-index of fullscreened elements to 2147483647 (the largest 32-bit signed number). According to tests, setting the z-index of other elements to the same z-index will cause them to show, but the z-index of the fullscreened element can not be changed (it can, but the browser just ignores the value — even with !important).
Maybe the only reference I could find to this:
https://github.com/WebKit/webkit/blob/master/LayoutTests/fullscreen/full-screen-zIndex.html
Also, in Chrome dev tools:
So either set elements to the maximum z-index, or, the better solution would be to just create a container element, make it so that all elements you want to display are children of the container element, and fullscreen it.
Related
I am having a weird issue with Polymer paper-dialog on Safari iOS, working nice on desktop. The overlay seems to be under the backdrop element so the overlay is not accessible.
I have been reading this question
paper-dialog in Polymer doesn't close in iPhone
and the proposed solution doesn't work for me.
The thing is that when I try the dialog in the polymer-project element page it works on iOS but my implementation doesn't, but I can't find any differences between my implementation and the provided demo https://elements.polymer-project.org/elements/paper-dialog?view=demo:demo/index.html&active=paper-dialog
I have put my page in an accesible url so you can try it
http://v5.irekia.efaber.net/mobile/test
If I try it from my Safari desktop it works fine, but in my iPhone the backdrop element is over the overlay
Could someone help me? Am I missing something?
Try bumping the the z-index of your paper-dialog to 105. The <iron-overlay-backdrop> element has some limitations:
The element is styled to appear on top of other content by setting its
z-index property. You must ensure no element has a stacking context
with a higher z-index than its parent stacking context. You should
place this element as a child of whenever possible.
Source:
https://github.com/PolymerElements/iron-overlay-behavior
Polymer is not fully supported on some browser yet.
Try to update the webcomponents.js or update the paper-dialog component.
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
Specifically, I'm wondering how this can happen (from Chrome Developer Tools):
My understanding is that it is telling me that the CSS says to make the width 1000px, but the browser decided to make it 985px. How can I track down the root cause of the discrepancy?
I see the same thing in Safari Web Inspector. Specifically, the width value under Rules is 1000px:
while under Computed, the width is 985px:
In case it matters, this particular issue is showing up for a div element.
I have issues with paper-shadow in the creation of my application. When I wrap content in a paper-shadow element, the shadow doesn't render no matter what z-index I specify. Developer Tools in Chrome show the paper-shadow element being of size 0x0 pixels.
I am also using a paper-dialog and it is supposed to automatically display a shadow but it also doesn't.
Is there an issue with paper-shadow that I should be aware of?
Resolved this by upgrading to the latest version of Polymer.
On this site you can read: "[...] if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want."
Is there another solution to emulate Webkit´s behaviour?