顯示具有 html 標籤的文章。 顯示所有文章
顯示具有 html 標籤的文章。 顯示所有文章

2015/06/05

Blank window issue on Safari Mobile and a quick solution

I am working on an embedded project. The device provides simple Web HTTP interface to interact with this device. It works fine on all browsers but Safari Mobile on iOS 8.3.

Surfing on Google, there are some problems on Safari Mobile (article 1, article 2, article 3, article 4, article 5). They sound like not same as what I am facing to. I monitor the packets captured by Wireshark, and found that Safari Mobile didn't load all resources(css, js, ttf, etc.) completely causes this problem. The Safari Mobile communicates with Web server in HTTP pipeline, while the others (Chrome, Firefox, Opera, IE, Safari Desktop, etc.) don't. (The others will reuse the connection, but won't pipeline them). That is the major difference!

In theory, the HTTP pipeline can speed up requests by reducing the number of round trip times. But there are some articles(articles 6, article 7, article 8) comment on this point. This is not what I want to discuss in this page. Let's back to my problem.

The HTTP pipeline raises lots of problem. Some developers submit tickets to Apple, but there is no plan to solve the problem. I try to find

I found an easy workaround for this issue at last. This problem can be solved by setting the connection field of the HTTP response header. I force the connection field to be "close" if the browser is Safari, and it works! In Java Servlet, you can set it as
response.setHeader("Connection", "close");

(or you can set the header field in Filter), or in PHP
header("Connection: close");

or you can set the field in Web server setting.

In Safari Mobile, it will close the connection when receive the response, and won't send further requests thru this connection. That is, no more HTTP pipeline from Safari Mobile. I am not sure is this the best solution or not, but it really solve my problem.

2015/05/04

iOS 7/8 Safari空白畫面

如果你的網站在Desktop版的Safari是正常,可是在iOS 7/8上的Safari卻會出現空白畫面,一直loading不停,那你可能遇到Safari的bug了。可參見: http://tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/ 

這問題來自當要用Safari連上一個網址,這個網址你之前曾要連,但是因為網路、使用者中斷或是其他問題,造成某些resources(html, javascript, css, 圖檔等等)並未完成下載,但是Safari卻當成已完成下載。當使用者要重新連這網址時,在reload時會問server從上個時間點後有沒有改變過(雖然上次沒有完成下載,但是Safari卻當成已下載過),而server此時可能回覆304 code表示沒有改變過。因此Safari就會從cache來取得這個resources,但是在cache裡的resources本來就不完整,造成Safari在呈現或呼叫webkit javascript engine執行時便發生錯誤,出現空白畫面或一直在下載中。 

對此問題有興趣,可以用"ios safari 304"為keywords在google上搜尋,可以找到不少討論此議題的文章。 

目前Apple似乎還未將這問題列為bug,所以可能還沒有修復的時間表。至於網路上有些人有提出些workarounds,主要都是將server-side改為不回應304,或是針對Safari不回應304,讓瀏覽器對所有的resources都一定重新取得,而不是使用cache裡的。不過這對使用iOS 7/8的iPhone/iPad來說,將會耗掉更多的電力與頻寬(如果不是吃到飽就要小心了),但對網站經營者來說,為了達到Apple常掛在嘴上的「使用者體驗」,似乎也沒什麼其他的解法了。

2014/05/19

datalist在Chrome跟Firefox的表現

HTML5的datalist在Chrome跟Firefox的表現還真是差別不小
以下面這個例自來看
<input list="states" />
<datalist id="states">
<option value="Kansas">
<option value="Missouri">
<option value="Colorado">
<option value="Nebraska">
<option value="Oklahoma">
</datalist>
a

如果在input field中輸入 "o",在Chrome與Opera中看到的是以o開頭的選項,而且有像select/option的下拉式操作


而在Firefox中所看到的,是選項中含有o這個字母的選項,且沒有下拉的三角形 (不過在input field中用mouse click,還是會有選項出現)