I just tried my Polymer Paper Elements 1.0 based web app on the Windows 10 Edge browser and the UI elements do not render. The UI looks fine in other browsers. I navigated the Edge browser to the official Paper Elements 1.0 catalog and much of the UI does not render there either. Before I flush my Paper Elements work down the toilet I just want to be sure... Does anyone know of a tweak that will allow Paper Elements to work in the Edge browser?
The problem the Edge browser currently has with the Polymer catalog pages was a red herring. There were two pieces of code in my JavaScript that were causing problems for Paper Elements when running on Edge (or IE):
1) A var console; declaration at the top of a file. The line was present to keep JSHint happy.
2) Line document.domain = 'mydomain.com'; which was being used to relax CORS security enough to allow accessing resources from subdomains of mydomain.com.
Otherwise, Paper Elements seem to work fine with the Edge browser.
Related
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed it.
my html/css works fine with chrome, FF and IE11. Also with IE8 when loaded locally from my harddrive.
When the same files are located in an networkdrive the css seems not to work properly. Colors and fonts are fine, but some div-containers are displayed at the wrong positions.
When i transport the files in the htdocs of an apache fonts and colors are fine, but other problems occur with the positioning. Strangly not the same as when started from the networkdrive. Some divs are now correct, others ar now misplaced.
I´m not able to find any pattern with this.
I can check the behaviour within ff and chrome with the build-in dev-tools. But i don´t know of any similar tool within IE8.
Any idea for my 1001 attemp to fix the problem?
Thanks a lot!
Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.
If there’s no X-UA-Compatible value and site is in Local Intranet
security zone, it will be rendered in EmulateIE7 mode by default.
Add X-UA-Compatible header or META to force full IE8 standards mode.
The Firefox Web Developer's Toolbar had an option under Information to see the topographical information about a page: what's inside of what. Is there any way to see that with Chrome's Dev Tools?
I installed the Web Developer's Toolbar on Chrome but can't see any way to turn the toolbar on. Then I found something from 2013 about Google disabling toolbars.
So, is there a way to see what elements are inside of what elements with Chrome?
I'm using Chrome 34.0.
Thanks
The Pendule Chrome extension has a Topographic View which works like the Firefox one.
And about the Web Developer extension in Chrome, after you install it, you'll be able to enable it from chrome://extensions/, it will show a gear icon button at the top right of the screen.
According to William Price's comment, something that was once called "Tilt" in FireFox is meant. We considered doing the same thing, but since it was impossible to correctly display overlapped elements' contents (IIRC, Tilt had the same issue), we abandoned that idea. Instead, we've got the Layers panel, which displays compositing layers (see Layer composition in the chrome dev tools).
After upgrading to Chrome 18 on OSX 10.7.3, we started noticing fleeting rendering artifacts seemingly related to form elements:
They come and go during scrolling, it seems. I've been testing in a variety of other OS/Browser environments and have been unable to reproduce this, nor had it happened in previous versions of Chrome.
This is a mature, stable web app with fairly complicated HTML/CSS. I haven't been able to produce a simple test fiddle that reproduces this.
Anyone else seeing issues? Can you think of a possible HTML/CSS cause and not a Chrome bug?
I also noticed that Chrome 18 displays artifacts in some pages, but this only happens when that page is GPU accelerated. I asked a similar question a few days ago:
GPU acceleration crashes website
Chrome enables the hardware acceleration when it detects 3D transforms in your CSS.
You can go to chrome://flags and enable the "Composited render layer borders" option, if you see green squares all around your page thats because some CSS rule is causing your page to be hardware accelerated. You can try removing any 3D CSS rules or assign a higher z-index to these elements. It usually helps.
I've been doing a lot of mobile web development lately and two things have really shocked me: The number of browser-specific bugs (and shortcomings) and the complete lack of documentation on these bugs when I search online. I could avoid a lot of them simply by rejecting Android 2.1 and iOS 3 devices and that may make sense a year from now but they still represent a large enough chunk of the market that I really need to support them.
Right now I'm using http://www.caniuse.com where I can but this only tells me about missing HTML5 features not about bugs. Also, if I want to read deeper into what "partial support" means, I have to click through to the websites it links to which may or may not contain the information.
These are a few bugs and differences (maybe not bugs but something developers should be aware of) I've identified:
Android 2.1 doesn't prevent clicking on elements covered by an overlay element.
Android 2.1 doesn't always clear placeholder text immediately (sometime visibly, sometimes invisibly) counting against maxlength.
Android 2.1 HTC desn't fire touchend events if scrolling occurs.
Android 2.1 (ans sometime iOS3) may prevent all in-page network connections after application cache download finishes.
Android 2.1 supports background-size only through -webkit-background-size.
Android 2.1 and iOS 3 do not have correct styling for HTML5 elements.
On Android devices, inline-block elements will sometime exceed their specified widths and overflow to the next line: 33.33% + 33.33% + 33.33% > 100%
iOS 3 may blank out elements during translate3D or tranlateX transitions.
Android 2.2 (one device) would occasionally render the new page's 3D translated elements on top of the old page during page navigation.
Each of these bugs required a significant amount of testing, experimentation, and often-futile research. I'm sure there is a lot of collective knowledge on these device- and version-specific problems but I haven't seen it channeled into websites like we have for the desktop. Does anyone know of any sites out there that have this?
QuirksMode does have a list of many mobile browsers and what is and isn't included.