Prevent pixelated Images in Windows Store App - windows-store-apps

Any image of sufficient size that is displayed in any app I've worked on becomes pixelated when resized. The screenshot above shows a high resolution photo that - when outputted - becomes heavily pixelated.
I've tried the good old (little-known) property specific to IE -ms-interpolation-mode: bicubic; but it makes no difference.
I've seen this problem in Microsoft's News App on multiple machines so I don't think it's a problem limited to my machine or the way I'm displaying the image.
I've tried this in Windows 8/8.1 and 10 with the same results.
Trying the same code in Edge and IE11 works fine, the image is beautifully sharp without pixelation. Here is the exact CSS and image that make up the app example screenshot.
.exampleImage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
-ms-interpolation-mode: bicubic;
}
<img src="http://blog-admin.cddev.org/wp-content/uploads/2014/12/Aston-Martin-DB10-Front-Three-Quarter-e1417707100993.jpg" class="exampleImage" />
Does anyone know how to stop the pixelation?

I'm thinking it is a lack of subpixel antialiasing, which doesn't seem to be supported in IE and Modern UI apps.
There is actually a feature request for it here, with 5699 votes on User Voice, titled 'Return subpixel antialiasing to IE and ModernUI apps'
That request is relevant to fonts, but under the hood it is the same thing.

Related

Apple (Mac) computers are rendering basic CSS differently than Windows (both using Chrome). How do I fix this?

More detail. I am working with a jcink forum. On the forum there is, for example, an element with a margin: 50px 0 parameter.
On Windows this is centered, but on Mac computers, specifically, it's positioned too high. It's difficult to troubleshoot because it is not a Safari issue or a media query issue, so I can't simply change my browser window (or use developer tools to emulate resolution) to check the issue, as I'm on PC. I have a friend who has an apple computer that I can remote into and occasionally troubleshoot on.
I notice also that if I completely remove margins from the element, on MAC it sets right against the top of the container, but on PC there seems to almost be a 20px or so of padding.
Similar to this issue, in the surrounding element there is less space (margin) on the bottom on PC versus Mac. When I add 25px, for example, it looks fine on PC but adds too much on Mac, respectively.
The overall question is: why is CSS rendering different on Mac than PC and how do I standardize this so that the changes are consistent? Only a few users on this site have Macs but it this should be working regardless of the operating system.
I am adding both the forum this is affecting and the code in question. '
Here is the link (just click the checkmark to get past the first page):
https://colu.jcink.net/index.php?showtopic=5560
The header area with the name "Guy Gardner" is what we are looking at. If you are on a PC it is properly aligned. If you are on a Mac, it is not.
PC, where it is formatted correctly: https://i.stack.imgur.com/lDtPz.png
The container in the top bar with the post header information:
height: 150px;
background: rgba(0,0,0,.8);
background-image: radial-gradient(rgba(255,255,255,1), rgba(0,0,0,1)), url(https://us-east-1-02860049-view.menlosecurity.com/c/0/i/aHR0cHM6Ly9pbWFnZXM4LmFscGhhY29kZXJzLmNvbS85NzQvOTc0NjgyLmpwZw~~?b=GyXJkglY&k=4gWbxECk-JP1jGISJKN_BinYM4QYfjipF4RFQU7liIE~);
background-size: cover;
background-attachment: fixed;
background-blend-mode: multiply;
color: var(--mgroup);
font-family: 'DC Fandom';
font-size: 2vw;
text-align: left;
text-transform: uppercase;
text-shadow: var(--colour4) 1px 0px;
letter-spacing: -1px;
overflow: hidden;
z-index: 3;
border-top: 10px solid var(--mgroup);
}```
```.ecmpost .ectopbar {
padding-bottom: 25px;
}```
One of the issues is that the padding (on the 1920 media query at least) adds too much padding on Mac, though on PC it's perfectly aligned.
Another issue has to do with the name on the left side, for example "Guy Gardner." is to high on Mac but centered (mostly) on PC.
```.topbarname {
padding: 50px 0px;
z-index: 2;
position: relative;
display: inline-block;
letter-spacing: 0px;
margin-left: 120px;
}```
(I don't prefer using absolute/relative positioning, someone else wrote this code, but I did confirm this was not the issue)
I attempted media queries, but this isn't a browser size issue (I thought it was initially). I found it was only affecting Mac users.
I found the solution to the issue at hand. First, I did need to apply a CSS reset. I needed to do this because chrome has a default 8px margin. It took some time to realize that this margin was not displaying on chrome in mac for some reason. I used this reset and studied what each element was doing before applying it: https://github.com/necolas/normalize.css/blob/master/normalize.css
Secondly, I found that there was also an issue with the way the line-height was being rendered with the particular font being used on the website (even though the reset did apply a 1.15 line-height fix as well). As a result it caused space at the top of the font in the PC version of Chrome while it did not render in the Mac version of chrome. This, ironically caused an 8px difference, which lead me to believe it to be a default margin issue, even after I had applied the margin reset to the html/body.
To fix the font issue I ran the font through a web font generator that converts system font for web font use, and made sure to select the "Fix vertical metrics" option which erases the extra line-height space. Transfonter was the site I used to do that: https://transfonter.org
If anyone has anything else to add that I may have missed, please let me know, but these steps fixed my problem. Thank you.
When looking at inconsistent OS or browser issues, remember to check your font and the line-height.

Embeds appear to be breaking backdrop-filter in Firefox but not Chrome. Is this a bug or is it fixable in CSS?

Edit: Pending a reply from someone with a fix, I'm going to assume this is a bug. It looks like it may be related to https://bugzilla.mozilla.org/show_bug.cgi?id=1794432, though the thread on the tracker is sparse, so it's unclear if Mozilla has determined it is a bug. Contradictory to the thread there, it appears that during my testing any embeds cause this problem, and setting layers.force-enabled does not fix it. I'm leaving the question up with a link to the bug tracker in case someone stumbles across this due to encountering the same issue.
I'm working on a site with a sticky navbar using backdrop-filter to blur the background. This works great, but on pages with an embed (iframe, object, etc.), the filter appears to break in Firefox as scrolling approaches the embed. It doesn't appear to be due to stacking contexts (the navbar remains on top), but I'm at a loss as to what is causing it. Before I file a bug report, I wanted to get input and see if this is a problem with my code, and if anyone here knows the solution. I've included a reproduction below -- viewed in chrome, behavior is as expected; viewed in Firefox, however, the filter breaks on elements surrounding the embed. I've confirmed this happens with a pdf embedded in an object tag as well. I've included the code for a minimum repro below, and there's a link to a JSFiddle here: https://jsfiddle.net/gamo2zy3/1/
.navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
backdrop-filter: grayscale() saturate(180%) brightness(50%) blur(50px);
border-bottom: 1px solid rgb(0, 0, 0);
background-color: rgba(0, 255, 0, 0.1);
}
content-container {
display: block;
width: 500px;
}
div.takespace {
height: 1000px;
}
img {
width: 100%
}
.embedVideo-iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
}
<nav class="navbar">TEST TEXT</nav>
<content-container>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
<img src="https://w.wiki/64tg" />
<iframe src="https://www.youtube.com/embed/B4Kn3djJMCE?rel=0" class="embedVideo-iframe"></iframe>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
</content-container>
I've tested this on Firefox 107.0.1 and Chrome 108.0.5359.73; Firefox added support for backdrop-filter back in version 103 (though I haven't gone back and tested it in that or prior versions). I've tried adding wrappers and z-index settings surrounding the embeds, using a ::before pseudo-element to contain the backdrop-filter, and more. So far nothing I've done has caused the backdrop-filter to behave as expected on firefox. Obviously I can just run code to detect that someone is using Firefox and set the element to be fully opaque, but I'd like to avoid querying useragent if possible (feature detection wouldn't work, since Firefox has the feature). If there's a way to get this working properly in FF I'd like to know.
Before someone marks this as a duplicate, I do not believe this is related to z-index behaviour is different in chrome to firefox. Current firefox behavior mimics chrome in this aspect, fixed positioning is not used, and the navbar still shows up above other elements as expected.
As of Firefox version 108 backdrop filter behavior is working. Nothing in the patch notes suggests that this behavior was directly addressed, but the fact that it changed between versions suggests that it was a bug fixed by some other change (see https://bugzilla.mozilla.org/show_bug.cgi?id=1794432 for the bug it appears to be related to). It's very probable it was a bug.

Internet Explorer and html div title

I'm using the following HTML code to successfully show the title in FF and Chrome but it doesn't appear in IE - even IE9. I'm I doing something wrong? does this work for others?
<div class="emoticonTitleWink" title="Wink ;)"></div>
any advise welcome...
FYI the classe
div.emoticonTitleWink {
position: absolute;
width: 18px;
height: 18px;
left: 79px;
top: 59px;
}
Is there a way to get the small pop (text info) to occur in IE?
thx
Per the above comments, it is working for me in IE 8 too. Strange.
Nonetheless, if all fails, you could resort to IE conditional comments. These comments allow you to assign specific HTML just for Internet Explorer (or even different versions of Internet Explorer).
Here are the details:
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
In your case, you could perhaps use a javascript/jQuery script in IE instead of using the title attribute if you really must need for this title to work in IE.

Layout is broken after uploading to web server

I developed a small site (100% css layout). I have tested it on IE, Firefox and it looks fine.
After I upload it on my hosting company web server layout is broken only on internet explorer. I mean css is loaded properly but some elements are not at their places. I checked several times the css files on my local pc and the webserver and they have same content.
For example
#main{
position: relative;
width: 960px;
margin: 0 auto;
}
The code above puts #main div at the center of the screen. On my pc it work fine on IE, Firefox etc. But on web server that div floats to left on IE
What could be wrong ?
Internet Explorer has a number of things it uses to determine document rendering mode. The document being local or on the Internet is one of them.
Add
<meta http-equiv="X-UA-Compatible" content="IE=edge">
And then check the documents are consistent (either broken in both or working in both). If so, that confirms what the problem is and you just need to fix the CSS to work with IE in its best standards mode.
Microsoft provide more details.
Also make sure you aren't using the Compatibility button on the toolbar to force compatibility with older, buggier versions of IE.
For earlier versions of IE, you needed to add an extra bit of CSS to get things centered, i.e.:
body {text-align: center};
Then you'd also need to add text-align:left; to the first child div so the text isn't centered:
#main{
position: relative;
width: 960px;
margin: 0 auto;
text-align: left;
}
If the browser is behaving as an earlier version I reckon this could be the issue, so try adding this to your code.

Stretch image as background

I need image to stretch as background of page. It doesn't matter if page will not scale well, what ever screen resolution may be, whole image has to be visible on screen. I found some solutions on Google, but it either didn't work in Firefox2 or IE6 or both, and I need those two too.
I hate when people don't upgrade their software, but I'm still see these browsers in google analytics data hitting web page, especially IE6.
Is there good cross browser solution for this?
You could use a good old fashioned img tag, without height and width attributes. In your CSS, position it absolutely with a low z-index, set height and width to "100%".
Put everything else on the page in another div with a higher z-index
Like this:
<style type="text/css">
#stretchy {
postion: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
#everything_else {
position: relative;
top: 0;
left: 0;
z-index: 10;
}
</style>
...
<img src="/images/myimage.jpg" id="stretchy" />
<div id="everything_else">
...
</div>
See http://axoplasm.com/lost.html for an example.
It's not exactly a "background image" (and probably not W3C standards-compliant CSS) but it works.
I don't want to hijack this question, but if you had this code:
background-image: url('images/background.gif');
background-size: 100%;
This repeats the image in all current browsers (IE, FF, GC, SF, OP) which while unsavory works across all the browsers, unlike the z-index depth method (I have a complex foreground).
However if a browser was to suddenly get bg-size CSS3 support, does the CSS3 spec say what should happen? Should it stretch the image or do what it always did and repeat?
It is not possible in CSS1 or CSS2, however it is possible in CSS3: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/
However this is not available to IE6.
An alternative would be using background-repeat, or this site has something that might work (I havent checked if it works): webdesign.about.com/od/css3/f/blfaqbgsize.htm
I know what you mean about users not upgrading browsers, but at what point do you stop coding for IE5, or even IE4?
Good luck,
Matt
A good alternative would be to use a "static image" that fades out to a pattern or solid color. That way you still get your background image (however big you want it) and scalability.
In CSS3, you can use background-size: 100%;
Firefox 3.5 supports some CSS3 properties, but I don't believe they support EVERYTHING yet... (I think).