I am trying to use workaround described in the post: https://forge.autodesk.com/blog/transparent-background-viewer-long-last to set transparent background to the viewer.
And it is ok for desktop browsers. But if I try to open the same page (e.g. example page from the post) in Chrome/Safari browser on iPhone, the background isn't transparent.
Is there any solution to have a stable transparent background for the viewer?
What's iOS version and what version of Chrome did you try? Unfortunately I was unable to reproduce the issue - I was able to get transparent background on my iOS 13.4.1 following the demo link in the blog article:
Related
Does Chrome Developer tools stopped displaying preview of CSS background images? It used to display it like this:
But now it's not showing the preview image.
sometimes I just want have a look at the background-image to see how the UI effect being implemented(e.g. effect).Anyone knows how to bring it back without modifying of the chrome version? If not, please show me the official declaration for this.
Checked on Chrome Version 60.0.3112.113
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
I am stumped as to why my styling is so distorted when I use firefox.
The website is http://shehunter.joshmu.com
Could it be related to the fact this site at the moment is being worked on via a public dropbox url?
Font, positioning and background transparency seem to all be wrong.
Works fine in chrome and safari.
EDIT-
when i click on the info tab the text is displaced far to the left...
in the 'music' section there is a transparent blue background appearing...
UPDATE-
info section solved with position:absolute cheers #sarcastyx!
however still have problems in firefox with it accepting google web font and background transparency problem in the music section of the site.
Thanks for all the help everybody!
Looks good in firefox for me. Screenshot:
I got stuck among the weared behaviour of browsers. Ihave a div which has a background image which has color code #fbc61e so i set the background color of div to #fbc61e.
This works well in Inernet explorer. But when I render same page on firefox an edge appears between image and background where image ends.
When I analysed the snapshot of firefox page I got the colorcode of image #fece00 and when I set div background to #fece00 then edge disappears in firefox but appears in Internet explorer.
Please enlighten me to resolve this problem.
Thnx in advance.
You're probably tripping over embedded color profiles, which IE and FF handle differently. Depending on your graphics editor, you should use something like "Export for Web and Devices" (Photoshop/Illustrator terminology). Set your color profile to sRGB to avoid surprises when exporting.
GIFs and 8-bit PNGs are the only safe choices for what you're trying to do, but you can try getting rid of any gamma tags that might have been written out to your file to see if it helps.
When using PNG files (made with Paint.NET) as background images on my web site, IE7 is changing the colors and actually displaying a darker version of my images, as seen here. In this image, the dark background and background image should be both #001122, and the medium background and background image #004466. But IE7 changes the images to #000C1A and #003A5B respectively. No problem with FF3.
IE has a known bug with PNG gamma info, though I thought they had fixed it in version 7 :-?
I remove the gamma info from PNG files using "PNG Crush". I've created a right-click shortcut in Windows explorer. Further info: using pngcrush in windows
An alternative to PNGOUT is TweakPNG. Comes with a GUI and no installer, very easy to remove the gAMA (just right click and delete it!)
http://entropymine.com/jason/tweakpng/
I think this has to do with Gamma correction. Take a look at this
http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx
Additional resource on this issue: http://www.modernblue.com/web-design-blog/tweak-that-gamma/