I am having a strange issue with an img that only renders when the browser gets resized or dev tools are opened. The img has srcset and sizes attributes, and is inside a polymer template. It displays normally whithout the attributes, or outside of the Polymer shadow dom. The issue came up with Chrome 39, I believe, and is restricted to Google Chrome, where there are no polyfills at work anymore. There are no errors in the console, naturally, status is 200 ok there. I am having no issues in Firefox or IE. My polymer version is 0.5.0, and I reported the issue at the Polymer github page, but maybe there is something else to it. Lex
Responsive image doesn't render on page load in Chrome, renders on browser resize or opening dev tools
286 Views Asked by Alex Kimoto At
1
There are 1 best solutions below
Related Questions in IMAGE
- Add image to JCheckBoxMenuItem
- Display images on Django Template Site
- How to resize images with PHP PARSE SDK
- Animation in Java on top of JPanel
- Slow performance on ipad erasing image
- What are the pros and cons of the picture element?
- Carrierwave file upload with different file types
- How to use annotorious with angular
- Images not showing when uploaded to server
- ImageView doesn't show up
- Image Resizing adjusts ratio
- Displaying bitmap image on Android (OpenCV)
- Class 'Imagick' not found - PHP and Windows
- Image position - randomly select position
- Replace image 1 with image 2 after 5 sec
Related Questions in GOOGLE-CHROME
- detect requests calls in a url similar to network in chrome dev tools
- Html File Input on Chrome for Android missing extension and mime type
- Angular multiple http requests chrome android
- Interact with chrome bookmarks outside of extensions
- Animation Blink not working properly on Chrome
- Can't use subdomain in Chrome using Apache (XAMPP)
- How to start Chrome Hosted App in window?
- Webpage - Font size of table items on mobile phone browsers changes
- Could Not Instantiate Mail Function - PHPMailer - With Attachments - Only Google Chrome
- Chrome print preview disable only link location in footer and header
- CSS spinner sequence not working smoothly in iOS Chrome?
- google chrome remove automatically td when it is not in table and tr
- selecting and using textPath elements in Chrome
- Can I create and publish extension to the Chrome Store from my website?
- How can I get a button on the side of a text box to be perfectly aligned all the time?
Related Questions in SHADOW-DOM
- Polymer 1.0 on Firefox, Safari /deep/ selector not working
- Are there any Chrome-specific techniques to scope/isolate CSS?
- Polymer share styles across elements
- Adding event listeners to elements cloned from the template tag
- How to create style scoping for arbitrary content with Polymer / Web Components
- What is #shadow-root, and why does it put display none on my font awesome classes?
- Shorthand for extending native DOM element?
- How to access host element from within the shadow root using Shadow DOM v1?
- Is there an alternative to declaring a slot name in light DOM?
- Possible to Change Window/Tab Title using ShadowDOM
- Accessing parent Shadow DOM elements using child elements
- Nested element (web component) can't get its template
- Styling shadowed elements from outer world using Stylus/WebStorm
- User's style for vanilla JS webcomponent
- How to properly remove a polymer element from a web page
Related Questions in SRCSET
- Firefox: Img with 2x srcset specified has weird spacing when inside float
- Is it possible to see which srcset image a browser is using with browser developer tools
- Is it possible to recalculate the `srcset` image used if browser window is resized?
- Does `size` need to be used with `srcset`, what are the pros / cons?
- Object-fit: Cover and Srcset
- "Infinite" or "smart" srcset when using server-side resizing?
- TYPO3 responsive img datakey.xxx has no stdWrap?
- srcset of Image puts height to 30px in Edge
- HTML5 srcset: Mixing x and w syntax
- Mixing srcset and picture for responsive images
- Responsive image doesn't render on page load in Chrome, renders on browser resize or opening dev tools
- img srcset - disregard pixel density
- Responsive image srcset is not rendering the correct size of image
- Sizes attribute does not work in the image
- Concatenate multiple vue-loader require in a computed property to define a srcset attribute Vue.js (Nuxt)
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
OK, I think I may have fixed this, though it is a bit silly that I had to do it this way. Originally I had written these with the combined declaration:
When I write it long form it seems to work just fine.
If I have more time to look into it, I'll comment in any info I find on why this may be.