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.
Related
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.
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.
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.
i'm new with html5 and css3. I released my first website last month and now i found out that it's not working well in the new chrome version (22): All the fixed elements are no longer fixed... The navigation bar on the top of the screen for example. it was fine only a week ago and i have no idea why now it's not.
This is the website: www.biofilter.co.il
As far as i can tell, it's still working fine in Firefox and IE.
Does anyone has an idea what's going on and what could be the reason?
Your problem is likely caused by Chrome reworking how position:fixed elements handle stacking of z-index. The change was made for Chrome v22 so if you built on v21 and use position:fixed, you might have a problem.
They suggested testing by hitting the Chrome special URL about:flags in the browser, and setting Fixed position elements create stacking contexts. to true (for v22+) or false (for v21).
It is possible to rework your CSS by ensuring position:fixed elements are stacking correctly. Unfortunately, it is a little complicated so recommend you read these for better explanation:
Stacking changes coming to position:fixed elements
Elaborate description of Stacking Contexts
I've been trying to add a swf over a swf on a html page, it's working fine in Firefox, but in IE, the one that's added first is always on top of the other one. I used z-index but it's not working, does anyone know how to solve this? Thanks.
I already added wmode:transparent, it is working in firefox but not in IE 6.
Add wmode=transparent to your movie parameters.
Use a background iframe...Here is a nice jquery plugin to handle it for you.
In order for z-index to work on a given element in a page, this element must be positioned with position: absolute or position: relative. You also need to set the wmode parameter to transparent to allow the browser to position the flash content below other elements in a page.