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.
Related
I recently tried to load a tool on my phone that I develop that is hosted internally where I work.
A few things looked off, which I expected. But one particular element seemed to be extra odd.
I eventually loaded the page in Chrome on a MacBook Pro and used the "Device Toolbar" feature to render it in my Desktop browser like it would on a phone. To keep a private application private I will demonstrate with Google.com. This is what I see:
That's the body element highlighted in blue. The html element is the same.
This is what I see in my application too and explains what I'm seeing when actually using my phone.
I can't, for the life of me, understand why these elements chose this size. There is no explicit "width" for these elements, nor is there "max-width" etc. Nothing that I can see that should cause this behavior.
Can anyone explain this behavior?
UPDATE
It appears that there is some odd behavior with Dev Tools. Proper mobile testing probably shouldn't be done this way (Feel free to change my mind, Google...) but the issue stands that sometimes, the body element doesn't stretch to accommodate its content.
By default, block-level elements, including <body>, do not expand to fit their content, but rather will expand to the width of its container. See the spec for detailed information.
See this fiddle demonstrating this. If you resize the panels/window you'll see the body width changing based on the viewport, but the content width has absolutely no effect.
This SO question has more information: Why isn't <body> expanding to fit its contents?
Another issue that's not helping is related to the Chrome dev tools device toolbar. Changing the zoom, disabling and re-enabling the device toolbar and its settings can be buggy and is not always reliable. I have spent hours chasing issues that didn't actually exist because the device toolbar functionality misled me.
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.
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