Here's one that has perplexed designers for years now, even over the course of Twitter changes and countless hours of hair-pulling and blame-the-developer.
Twitter produces its own js widget for rendering a timeline. Here's a sample of the code without any customization, for an actual account - pasted as found in the interest of science rather than readability:
<a class="twitter-timeline" href="https://twitter.com/OT_Tweep/lists/ordinary-twitter" data-widget-id="570958838329643008">Tweets from https://twitter.com/OT_Tweep/lists/ordinary-twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I'm too noob here to include images directly. Here's a link to how it's supposed to look - and does in fact look on many browsers/machines - like Safari and, today but not yesterday!, Chrome - also on Firefox for mobile:
http://ordinary-gentlemen.com/wp-content/uploads/2015/02/correct_twitter_widget_display_safari.png
Here's how it renders on Firefox 36.0/Windows 7:
http://ordinary-gentlemen.com/wp-content/uploads/2015/02/twitter_widget_display_firefox.png
Not cool! But not a pure Firefox issue, nor a WordPress issue, and not a new issue. Literally as of a couple of days ago, the display on Chrome was, to use the technical term, kerflooey (embarrassingly worse than either of the above examples), as it had been for months. I don't recall having changed any setting on Chrome in the meantime, though I have used it a bit more than usual while investigating a different mystery (why an image appeared on my Chrome, but not someone else's, though on his iPad, but not his desktop, etc.).
There's a Twitter Developer Forum thread going back to 2012, continued for a at least a couple of years, never fully resolved, featuring one complaint after another. Some users seem to think they've solved the problem, others remain joyless. I'd link it, but I'm also over the newbie limit for links in a post. If anyone is interested, I'd be happy to post it in a thread.
I'm not sure I should hope that this question will put me over the 10 reputation hurdle, but I'd be very interested to learn if someone has a solution or explanation.
ADDENDUM: I should also note that a version of the widget displays fine on one WordPress site I'm using, but not another, through same browser/machine. Nor does disabling all Firefox add-ons and extensions produce desired rendering on the problem site. The thread I cannot post mentions the problems on Drupal and other sites, and a wide range of fixes, none of which fix.
If you want total control over the Twitter feed, you'd be better off to develop your own using the Twitter API and PHP.
https://github.com/J7mbo/twitter-api-php
The default js twitter widget is unreliable and obviously doesn't work on all browsers or devices.
What you need is the php twitter api to generate exactly the html that you want so you can have more control over the styling.
Let me know if you need help! I've developed a twitter module for Drupal.
Related
Hello StackOverflow 😀​
I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)
You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.
Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'
I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash.
My question is how can I improve this? and what is related to this?
Most of the questions here are related to some stuff that is in react-native, but my app is react web.
I have read about FOUC but I'm not really sure if it's the issue.
btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).
Thanks for help.
Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?
The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.
Here's what comes to my mind:
Environment check before troubleshooting an web app
I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram
The machine spec only holds some portion of performance assessment. It may or may not matter. because,
OS can slow down the performance due to its update issue. what OS are you using?
Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?
So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.
Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.
Finding Problem with (any) Web App
If these little details are not causing the problem, it's time to get metrics inside browser.
I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.
Somebody already mentioned React devtool profiling in comment but I also recommend these tools:
Chrome Performance Tab
Chrome Lighthouse(previously Chrome Audit Tab)
Please try run a performance check with these tools first.
I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.
(screenshots inside red lines are indicating white screen flashing moment)
Most Probable Reasons at the Moment
according to Chrome Performance Tab + Lighthouse audit, these problems are existing in that flashing moment.
treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.
lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).
too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.
this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.
Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).
Perhaps turning Hardware Acceleration off will fix the issue?
You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.
I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?
So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app).
The problem with the picture was - whopping 35,000 px width and 5,000 px height.
You couldn't see it because it was inside a div with a fixed height and width.
The way I found that - opened dev tools, and started to delete the divs.
for example, we have:
<div id="root">
<div>1</div>
<div>2</div>
</div>
So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture.
Very 'old school' but it is what it is (:
www.mpee.fi
I made myself a website to study things and to put my content in. I ran in to an issue where several friends report that on an iPhone (7) the Photography section doesn't work. It just shows blank section. It is impossible for me to pin down exactly where the issue lies since I don't have any Apple devices at hand. Firefox emulator claims everything works fine, but in practice on iPhone 7 the Photography section fails to display.
I don't know if it is a Javascript problem, which would be odd since I use exact same method to display other sections (basic Ajax+PHP+JSON setup)
Or maybe it's a CSS problem where I am missing some CSS setting for Apple products?
I am so sorry for so vague question, but the problem is specific to iPhone (tested on 7). So while the question is board, the problem is specific.
I thank you in advantage for any possible aid. I want to fix this.
First a little context. I'm a designer from the Netherlands with a love for code. I can find my way pretty ok in html and css and a little bit in php and javascript. I love the Stack Overflow community, it helped me so much and it still helps me every day in becoming a little bit better at coding!
I have never asked a question here at S.O. before, because I always found a way to solve problems, untill now. I literally tried everything and I really hope you guys can help me.
I have a hobby project: https://unboxguide.com
It is some kind of TripAdvisor for CrossFit Boxes (gym boxes).
It is a Wordpress website which uses several different plugins for some functionalities.
The site works perfect on desktop browsers like Chrome, Safari, Firefox, etc. No problem there.
Then on mobile, still no problem there. On Android with chrome, it works perfect, on iPhone with Safari, still shiny.
But then.... the horror starts.
The Facebook in-app browser. There is something completely weird there. If I post a link to the website on Facebook and you click on it in the Facebook app it will open the Facebook in-app browser. The website renders completely randomly. Sometimes it doesn't load fonts, or any of the layout (css). Sometimes it doesn't even load the images.
Some research taught me that it is some kind of webview of the internal Mobile OS browser. So on iPhone a webview of Safari and Android a webview of Chrome.
I tested the Facebook links on Android, no problems there. The problem only occurs in the Facebook app on iPhone.
If you want to see for yourself, post https://unboxguide.com on your Facebook (just do it privately, so only you can see it) and keep refreshing it. The more you refresh, the more random results you will get. It's so strange.
I've tried so many things: rebuild the whole CSS, killed all plugins, tried different themes and tried to build everything from scratch. I also tried different backups from a few months ago where (I thought) the problem didn't occur yet. Nothing helped.
I really really hope someone has had the same issue or understands the problem, and can help or point me in the right direction.
Thanks in advance!
PS: If anything is needed furthermore to help you guys figure out what the problem can be, please let me know and I can post more information.
Old question, late answer. If your website uses ajax and uses X-Requested-With header to detect ajax requests (or not) this could be the reason. Webviews most of time use the X-Requested-With header for something else, so your pages are displayed like Ajax results (without css, javascript etc) and not like full html page.
Hope this helps.
I have a website using Joomla 2.5 and a high number of Plugins and components. I did not change a thing, but since this morning the following happens: The page is rendered fine, and after some seconds delay the page disappears and only one (or several, if available) banner of that page remain. This only happens with javascripted banner items, not with regular image banners. Pages with more than only one banner collapse and show all these banners (without the rest of the page).
What could potentially cause that error, and where to look for rectification?
Thanks for any idea anyone may have.
Ralph
Example:
enter link description here
The problem was solved by the programmers of the main site software JReviews, they "reverted a change that was made to a slider to fix an issue with jQuery 1.11 which is loaded by the latest Joomla 3.2."
I hope this explanation is helpful for the StackExchange forum, and also sufficient, as I do not have further details of the error rectification that was done remotely. Should I get any further details, I will surely post it here.
I am trying to achieve a Digital Signage using Raspbian OS on my Raspberry. I set my r-pi to open in kiosk mode chromium browser and to shows a slideshow od ads and scrolling news within my web application.
I created the ads slideshow using jquery image slideshow and scrolling news with marquee html tag.
The result is jerkily scrolling news.
I think the problem is due to the couple "jquery-marquee" because if I run only jquery or only marquee it works!
Can you give me some ideas?
I thought to only use CSS3 to realize scrolling news and scrolling ads
UPDATE: You can see my work here
From normal browser it works. From chromium v.22 on raspbian-raspberry it is a disaster.
I have already choosen little images (not bigegr than 200kb) but the problem remains.
I utilised jquery image slideshow and jquery.marquee
I hope you can help me to solve this issue.
I just read a bit from http://blogs.wcode.org/2013/09/howto-boot-your-raspberry-pi-into-a-fullscreen-browser-kiosk/ and noticed:
Optional bonus Step 4: Accelerated X11 Server
Currently (Sep 2013), the default X11 server isn’t exactly optimised
for the Raspberry Pi; however, work is afoot and you can install a
work-in-progress version fairly easily. This has worked for us and has
been nice and stable. YMMV.
UPDATE: Comments have suggested possible problems with newer Rasbian
releases. We’ve not verified this either way. You don’t need to
install this, everything will work just fine without it; at the time,
we were trying to squeeze every last ounce of performance from the Pi,
so it seemed pertinent to install this patch.
The blog mentions an accellerated X11 server
https://github.com/simonjhall/fbdev_exa/ , or in particular
https://github.com/simonjhall/fbdev_exa/tree/master/releases/20130401
Maybe following the instructions on that blog link might help.