after I converted attributedString to HTML including some image source everything is fine in iOS 10 like :
<p class="p3"><span class="s1"><img src="file:///Attachment.png" alt="Attachment.png"></span></p>
but the <img src=... segment is missing if the app run on iOS 9:
<p class="p1"><span class="s1"></span></p>
does anyone know why？
Related
Having problems with react router hash link on mobile.
On desktop its working great but on mobile its giving me an offset that it sometimes over 100vh away from my anchor tag.
This is where the links get set
<AnchorLink
to={`audio-demos/#${anchorTitle}`}
className={`item ${classItem}`}
style={{ backgroundImage: `url(${src})` }}
>
</AnchorLink>
This is where the id is set
return (
<>
<div className="spacer" id={id}></div>
<div className='demo-audio-container' >
<h2 >{title}</h2>
<div className='adverts-container'>
<div className='adverts-left'>
The site im developing is
https://ingrid-voice.netlify.app/
you can recreate the issue by opening devtools in chrome and going on iphone 5 or 7 for example. go to home page and click a link in the portfolio section. This takes you to audio page and an anchor link. On desktop works but on mobile anchor is not at top of screen.
Any ideas?
Thanks
I've managed to do a workaround by removing the animated hero image on mobile. Seems to have fixed the problem on my android but still seeing the problem on iphone 7.
I am currently prototyping a website using Foundation 5. I have a HTML5 section which contains an image, header and repeated background. This displays fine locally but as soon as I move the site over to my web server everything in the section tag disappears. It appears for a split second then disappears.
<section id="banner">
<div class="row">
<div class="large-12 columns">
<img class="logo" src="img/logo.png" alt="Logo">
<h1>Heading</h1>
</div>
</div>
</section>
Does anybody know why this is occurring? Seems odd that it only happens on the server.
Thanks in advance!
Please check the Stylesheet (CSS file) has been kept in right folder and CSS path is correct. I have used section tag in my own HTML5 Tutorial website and it is working perfectly. You can visit http://www.html5tutorial4u.com and check the source code of home page. I hope that it will help you a bit.
An SVG newbie needs your help.
I've created some SVG files using Inkscape and trying to implement these in my website scaling them over CSS ( height:12pt;width:auto; ).
It does work fine in Chrome and Opera but doesn't in IE 9 and IE for WP8.1:
The images are cropped to the indicated height instead being scaled.
Does anyone have the same issues or even a solution?
Thank you in advance!
Here's a link to the Image
Here's the integration code:
<div id="social">Social:
<a href="http://www.xing.com/profile/Alexander_Radeke" target="_blank" rel="me"title="Besuchen Sie unser XING-Profil">
<img id="xing" class="svg" src="fileadmin/sprachvertraut/svg/xing.svg"alt="Unser XING-Profil">ing</a> </div>
CSS:
#xing {height:1em;width:1em;border:solid 1px #eef;border-radius:0.2em;margin-bottom:-0.1em;}
Do you need more infos?
I've tried the empty style tag trick but still no go.
Opening: sharpsma.com inside of the latest Safari, the far bottom right promo copy over the Sharp Zenigata promo is pulled over left.
Open the Dev tools in Safari and then just closing, snaps it into place. Or, any editing.
All works in all other browsers from IE7+, FF, Chrome and Safari 5 but in Safari 6, it seems to be getting hung.
Visiting the site in Safari 6 will be the easiest way to see the issue. Then, just open and close the dev tools and the promo copy snaps into place.
Any ideas on what could be causing this?
You have few errors in html code (* marked with stars, open site in Firefox, view source, and you will get better picture), in that part of page:
<div id="ThreePanelPromoContainer">
<div class="promoBoxContainer">
<a href="/sharpledlcd"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-all-led-promo.png" alt="lcds"/>
<p class="promoBoxTeaser">Sharp offers an extensive line of Industrial Strength LCDs.<br />
<span class="learnMore">Learn More **>></a><**/span></p>
</div>
<div class="promoBoxContainer promoBoxesMiddle">
<a href="http://www.sharpmemorylcd.com/" target="_blank"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-memory-lcd-promo.png" alt="lcds"/>
<p class="promoBoxTeaser">Memory in every pixel allows for rich content on a small display.<br />
<span class="learnMore">Learn More >**></a><**/span></p>
</div>
<div class="promoBoxContainer">
<a href="http://www.sharpleds.com/" target="_blank"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-zenigata-promo.png" alt="zenigata"/>
<p class="zenigataFrontPromo">Because life happens in full spectrum.<br />
<span class="learnMoreZenigataPromo">Learn More **>></a**></span></p>
</div>
i guess that Safari is more sensitive to these errors than other browsers. :)
I have two google maps. The first is created using the Google Maps API (v3) and contained in #map1. The second is displayed in an iframe using the suggested embed syntax from Google and is contained in #map2.
Here's the fiddle: http://jsfiddle.net/wmcmeans/mPGWx/7/
Here are the snippets:
<div id="map1" class="gmap left bling"></div>
<iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&q=augsburg+germany&ie=UTF8&hq=&hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&t=h&ll=48.451123,10.862346&spn=0.004981,0.00912&z=16&output=embed"></iframe>
Here's the issue: Google Maps created from the v3 API do not respect the borders of the container having border-radius styling applied, when viewed in a webkit-based browser. The iframed (embed) method does not show the same deficiency.
Tested good:
FireFox v 19.0.2 (Windows 7)
FireFox v 32.0.3 (Windows 8.1)
IE9 v 9.0.8112 (Windows 7)
IE11 (Windows 8.1)
Failed on:
Chrome v 25.0.1364.160 m / Safari (Win/32) v 5.0.3 / Opera v 11.64 (Windows 7)
Chrome v 38.0.2125.104 m (Windows 8.1)
Version 2 maps are deprecated and not an option. I'd like to style v3 maps with CSS only, no graphics or overlays. I'm looking for a workaround to the webkit rendering issue. (I've already opened a Chromium Issue #187187 for this that, almost a year later, has yet to be looked at).
Here is the solution : http://jsfiddle.net/alxscms/3Kv99/
I am using several extra markups to achieve this, which I don't like so much but was the only possible way to me.
<div class="wrapper">
<div class="map" id="map"></div>
<i class="top"></i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
<i class="top left"></i>
<i class="top right"></i>
<i class="bottom left"></i>
<i class="bottom right"></i>
</div>
My goal was to have a inner border and rounded corners, but you can set the border thickness to 0 and you will have just the rounded corners on the map. This works on FF, Chrome and IE. I haven't tested on Opera or Safari.
This worked for me:
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
This appears to be fixed, so it's no longer an issue. You can verify that a map container's border-radius style is indeed respected, using the v3 map API, at this fiddle.
<div id="map3" class="gmap"></div>