最新Chromeでスライダー内のリンクをクリックできない問題

投稿日:2019/03/28

おやっ?弊サイトの様子が…

ある日私が所持するPCの内1台のPCで,Chromeの(バージョン73.0.3683.86への)自動アップデートをした後,弊サイトの一部のリンクをクリックすることができないという異変に直面しました.
この時は他のPCのChromeやそのPCの他のブラウザでは異変が見られなかったので,このPC自体のエラーなんだろうと思って放置していました.
しかし!再起動しても改善される様子が一向に現れず,もしやと思い他PCのChromeをアップデートしたところ,同様に異変が見られるようになったのです.
更に,Vivaldiの最新版でも同様の異変が見られ,「これはサイト側かブラウザ側の問題か!?」と危機感を抱き,問題箇所を調べました.

しかし私が実装したJavaScriptなどを見てもエラーと思われる箇所は見当たらず….Twitterに投げることにしました.


すると親切な方から問題箇所を指摘頂き,最近上げられたissueリンクを提供してくださりました.
Links in sliders aren't working - Error in the latest version of Chrome (73.0.3683.75) #1240 | Github
2週間前て…最近やんw

上記リンクに書かれていた応急処置を2つ(ただし課題あり)を簡単にまとめていきたいと思います.

問題のまとめ

●bxsliderの内部にあるリンクをクリックできない.
●Chrome:73.0.3683.75~のバージョンで上記の挙動が発生している.

応急処置1

jquery.bxslider.js
if (slider.settings.touchEnabled &&!slider.settings.ticker) { initTouch(); } // 上記を下記に変更. if (navigator.maxTouchPoints> 0) { initTouch(); }

【問題点】
●SafariがmaxTouchPointsをサポートしていないため,iPhoneにおいてタッチ操作できなくなる可能性.
●スワイプできなくなる可能性.

応急処置2

jquery.bxslider.js
if (slider.viewport.get(0).setPointerCapture) { slider.pointerId = orig.pointerId; slider.viewport.get(0).setPointerCapture(slider.pointerId); } // 上記を下記に変更. if (e.target.setPointerCapture) { slider.pointerId = orig.pointerId; e.target.setPointerCapture(slider.pointerId); }

【問題点】
●Edge/IE11において問題がある可能性.
●Apple製品やSafariにおいて問題がある可能性.

まとめ

私は応急処置2を採用しました.
SafariやApple製品は手元に無いため検証できていませんが,現状Chrome・Vivaldi・Edge・Firefoxではクリックやスワイプができていることを確認できています.
よりよい改善策が出ることとbxsliderがアップデートすることに期待します.

タグ:

Comment

0

Larry

2019-04-02 05:59:56

I’ll immediately clutch your rss feed as I can not find your
e-mail subscription hyperlink or e-newsletter service.
Do you’ve any? Please permit me recognise so that
I may subscribe. Thanks. I co

1

Master-Moheji

2019-04-02 16:31:36

Hi Larry.
Thanks for telling me your avoiding our check of password.
And I'm sorry that I can't read all your comment because it finished by "I co".
So I changed the maximum number of characters to 500.
Would you comment me another, or contact me from "About"?