I am having a weird problem with #font-face and svg images specifically on the Samsung Internet Browser on a webpage I am developing. It has some pretty strange issues.
Part 1: The font-face problem.
I am using 2 font-faces. For some reason in the footer area they load perfectly fine. But in other parts of the document they don't. Example:
Image of footer area
On this image, the blockquote is displayed with the correct font, below that the Follow Us part uses the second font-face and it displays correctly too. The About Us heading uses the same font-face as the blockquote element but it doesn't display correctly. Now, the second image:
Image of header area
The problem here is that the About Us huge heading uses the same font as the Follow us text in the footer area (visible in image 1), but it's not displaying correctly.
Part 2: The SVG image problem
In the Image of header area if you focus on the upper border of the text container below About Us you can see that there's a very deformed SVG logo that says Petit Délice. If I open the image in a new tab it displays correctly, but inside the page it doesn't. I was thinking of using png substitution for browsers without svg support but from what I can see it wouldn't be of use in this case as the browser does support SVG.
Now, these two issues only occur in that specific browser and from what I've been able to check it happens in Android 4.2 and 4.4 on Samsung phones.
The site works perfectly fine on Chrome (both Android and iOS), Firefox and on Safari, but the customer has a Samsung phone and for some reason uses the s*itty browser it has by default which is causing me severe headaches.
You can check the site on this link
Related
I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.
Here's the line in my header:
<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">
Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.
I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.
Any suggestions on how to even debug this or ideas on what is going wrong?
Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:
Delete the contents of the following folder:
~/Library/Safari/Template Icons
And then restart Safari.
Office 365 newbie. Just want to build a web page. Create a web page. Fine. Try to embed some SVG (from InkScape). Displays resulting image fine (yay!) but when I save, image disappears and says I should have used "embed command". Ok, try embed dialog. Displays resulting image fine (yay!) which then disappears when I save. I would just assume no SVG support, but it seems to be able to draw images from SVG just fine, but tosses the SVG code whenever I save. Hoping there's a checkbox somewhere that says "stop throwing away embedded SVG".
When I used Word 2010 and Inkscape, I found it useful to export the image from Inkscape as an Enhanced Metafile (EMF). I did so because the images then remained vectorized in PDFs. Not using Windows anymore, I can't speak for Word 2013, but I'd suggest you try it.
Office 365 started to support SVG format recently. Saving an Office file with SVGs in it shouldn't cause any problems anymore.
Btw: If someone needs to export a document to PDF, it is still recommended to use EMF as vector graphic format, since PDF doesn't support SVG natively.
So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.
I know this type of question has been asked many times before but I haven't found an answer to my specific issue yet so I thought i would post.
It's really a bit of a quirk I guess rather than anything else but I have designed a responsive site that resizes nicely in a browser when you resize the window and works perfectly when you load it up in either portrait or landscape on a mobile. However when you load it in portrait and then turn the mobile into landscape some mobile browsers don't load up the correct styling for the new screen size - BUT IT DOESN'T HAPPEN LIKE THIS FOR ALL BROWSERS! So far I have tested it on an Android 4.0.4 version phone using the standard Android browser and it resizes correctly when switching orientations but then on the same phone using google chrome as the browser it applies different styling BUT if you refresh the page it then applies the correct styling.
So my question is how can I force the mobile browser to render the page correctly on orientation change without having to reload the page?
The site in question is www.the-baobab.co.uk and im using the viewport meta tag and setting it to width=device-width and an initial scale of 1 then calling media queries at certain max pixel widths to alter positioning and layout for various different screen sizes which can be seen in my stylesheet1.css here
I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text