Content disappears or appears randomly Chrome - html

Strange bug I fixed once in the past but did not write it down/document it/report it so now I'm lost in the same workframe.
So, it's an Angular 2 app, the content is hardcoded html, no Angular binded variables, data banding or similar.
The bug show up on Chrome, not on Firefox.
If I refresh 10 times in a row, the content will show up sometimes and won't others, there is no pattern or clues about it.
Once the content is hidden, if i change whatever element property, will show up all the content instantly.
I have attached a gif which explains the bug clearly.
Thanks for any idea/suggestion/help :)
EDIT 1:
I just added 2 pictures of the css computed, one with Bootstrap 4 and other without the framework, same result.

Not related at all to Angular or any stuff like that.
I am importing a font from the GoogleFonts page. If I download this font, I get TTF format, which is having a bug on Chrome and does not work properly, but if I link to their server, it's using WOFF2 format.
See this picture attached which it shows the different formats for the same font.

Related

Browser shows old CSS / Hard refresh/clear cache doesn't work

I must have some sort of caching issue. I wrote code to create a download button. The button is meant to exist in 6 different colors, for 6 different topics.
Offline, in Local the CSS rules I wrote, display just fine. The button appear in the 6 different colors according to topic (screenshot 1). However, when I upload and update the CSS file to the live website, it doesn't work. The button appears in just 1 color everywhere and centred (screenshot 2).
It's a wordpress website theme, so I purged the cache. I'm using CMD+SHIFT+R to do a hard refresh, I've tried firefox, chrome and safari - also incognito. Nothing.
The width I chose is 250px and on chrome-developer tools it shows 30%.
Based on that I know that chrome uses an older stylesheet. Even if I change the css classes, chrome refuses to adopt the new ones. Also after a week of waiting - for an automatic refresh, the old CSS is still there.
As I said, I already purged the cache and did hardfresh, not sure what else there is to do. Anyone got an idea?
Screenshot 1 - how it's supposed to look
Screenshot 2 - how it currently looks
The actual CSS
CSS that chrome shows
Like ivvija said in the comment. Use a version push on the including URL of your CSS.
<link rel="stylesheet" href="https://yourdomain.com/css/style.css?v=1.0.1a" />
If you have made changes and it doesn't show up, change the version and it should push the new version. This also works for included javascripts btw. It's wise to use this always, specially when you are done with a development change. Else your visitors could experience the same problem. ✌️

dompdf - Why doesn't the CSS show up for printing?

I have been working for hours to figure out why my CSS is not being applied for printing an HTML page. I have created a working example of the markup I am rendering with dompdf:
https://jsfiddle.net/n7Lak0gr/1/
The HTML and CSS is a directory with multiple columns in a table. The rows have an alternating background color, and there are some other styles as well. But upon printing to a PDF, the styles do not show, even if I have media set to all.
Note that if you copy all of the code from this version and create your own local html file, you can see it better, since another issue is that the table overflows into multiple pages when the styles are not applied.
I have reproduced the issue in Chrome, Firefox, and Internet Explorer. And I have tried removing pieces of the CSS, but I cannot figure out why the styles don't show.
It is the default setting of most browsers not to print backgrounds. Obviously this is to save ink/toner.
You can change that setting in the browser preferences, but the bad thing is that you can't influence those via your website - it's purely a decision of the user who does the printing (and most users don't even know about this preference setting)
I figured it out. I had to delete the font cache file dompdf_font_family_cache.php located in sites/all/libraries/dompdf/lib/fonts/.
I was pointed in the right direction after seeing some other errors and viewing this SO answer

Why does html code show up as different images in different browsers?

(Discaimer: I only learned to code alone and upload some contents.)
I retrieved a symbol for a running person and used the code to build an html file to upload. The problem is that the image appears in different ways in different browsers.
A temporary mwe example.
direct view in my site ramoneando.com
code snippet:
<h1><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">🏃</span>runner</h1>
(Desired) Image on local browser.
Why does this happen and how can it be avoided?
I actually am OK with the variants. The worse thing is that some look to the right and others to left. I would prefer to remain with the first image, in dark filling and looking to the right.
The problem is that not every computer has the font Segoe UI Symbol installed, so the ones that don't just display the character with code 🏃 in the default font.
For example, this is what the snippet looks like on my computer
(It used the font Unicode Upper, if you're interested.)
So what you can do is any of the following:
Accept that the "Man running" symbol looks differently in different fonts and keep it the way it is
Use Segoe UI Symbol as a webfont (this may be overkill for displaying just one icon)
Or make a screenshot of the icon and turn it into a png file.

iOS 8 / Xcode 6 is not displaying tab icons properly

Is anyone encountering this problem, and have a solution? See the images bellow.
I'm using 50px and 100px #2x images, named for example: smiley.png and smiley#2x.png correspondingly. However, when I set them on a tab view controller (using the images.xcassets) resource to smiley, for example, they appear too large for the tab.
I have gone forth and added bar item image inset specifications of 5px to try and mitigate the problem. Now they appear reasonably sized. However when I run the app in the simulator the icons size up and down and sometimes disappear completley from the tab, and re-appear when I switch to another tab. They enlarge and contract when double tapping on them... this is very buggy behaviour.
I want to know if this is just the XCode 6.0.1 or iOS 8 issue, or something I'm doing wrong?
I am having exactly the same issue. I am glad I am not the only one. The icons scale randomly every time you press them and finally disappear into zero pixels. The workaround I found was to select the tab images from your Supporting Files folder. Works fine for me with a 120 x 120 image.
It must be a bug, I hope it will be fixed soon.
Edit: above solution does not work! It was a mere coincidence, when I added another ViewController with exactly the same settings, it messed up again.
What does work is the solution mentioned elsewhere in this thread by Victor S: use 30x30 and 60x60 images and put them in a new Image Set in Images.xcassets. Don't use images from your supporting files folder with image insets from the Inspector Menu - Xcode 6 is pretty messy up there and the weirdest things start to happen.
I solved this problem by making my #2x images be 60px square and my regular images be 30px square. I'm still a bit confused now if I'm reading Apple's image specifications wrong, ie, if #2x is 2x what they specify, or the regular images are what they specify / 2?!

images not appearing in canvas on chrome in iOS7

I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.